首頁 web前端 js教程 Ajax讀取txt並對txt內容進行分頁顯示功能

Ajax讀取txt並對txt內容進行分頁顯示功能

Jan 08, 2018 am 10:48 AM
ajax 內容 進行

這篇文章為大家介紹了Ajax讀取txt並對txt內容進行分頁顯示功能,非常不錯,具有參考和學習ajax的價值,對ajax感興趣的朋友一起看看吧

以下跟大家分享了ajax讀取txt並對txt內容進行分頁顯示的核心程式碼,廢話不多說了,直接貼程式碼了。


function TransferString(content)
{
var string = content;
try{
string=string.replace(/\r\n/g,"<BR>")
string=string.replace(/\n/g,"<BR>");
string=string.replace(/[ ]/g," ")
string=string.replace(/\ +/g," ")
}catch(e) {
alert(e.message);
}
return string;
}
var pageIndex = 1;
var id = $("#aId").val();
var url = $(&#39;#urlArticleContent&#39;).val();
var txt = &#39;&#39;;
var pageSize = @(ConfigurationManager.AppSettings["ArticlepageSize"]);
var page=5;
var pageCount = 0;
$(function() {
if(url!="")
{
txt = ($.ajax({ url: url, async: false })).responseText;
if (txt.indexOf(&#39;http://www.w3.org/1999/xhtml&#39;)==-1) {
pageCount = Math.ceil(txt.length / pageSize);
$("#PageCount").html(pageCount);
$(&#39;#word&#39;).html(TransferString(txt.substring(0, pageSize)));
$(&#39;#demo&#39;).pagination({
dataSource: function(done){
var result = [];
for (var i = 1; i < pageCount; i++) {
result.push(i);
}
done(result);
},
pageCount:pageCount,
pageSize: 5,
showGoInput: true,
showGoButton: true,
callback: function(data, pagination) {
// template method of yourself
var html = template(data);
dataContainer.html(html);
}
})
} else {
txt = &#39;&#39;;
}
}
})
function GoHead() {
GoPage(1);
}
function NextClick() {
if (pageIndex < pageCount) {
pageIndex = pageIndex + 1;
} else {
pageIndex = pageCount;
}
GoPage(pageIndex);
$("#pageCurrent").html(pageIndex);
}
function backClick() {
if (pageIndex > 1) {
pageIndex = pageIndex - 1;
GoPage(pageIndex);
$("#pageCurrent").html(pageIndex);
}
}
function GoPageNew() {
var page=$("#pageGo").val();
GoPage(page);
opts.current=page;
}
function GoPage(pageIndex) {
if(pageIndex==0) {
pageIndexStr = $(&#39;#goPage&#39;).val();
if (pageIndexStr==undefined) {
return false;
}
pageIndexStr = pageIndexStr.trim();
var pageIndex = parseInt(pageIndexStr);
}
$(&#39;#page&#39;+pageIndex).siblings().removeClass(&#39;active&#39;);
$(&#39;#page&#39;+pageIndex).addClass(&#39;active&#39;);
if (pageIndex==1) {
if(!$(&#39;#backClick&#39;).hasClass(&#39;disabled&#39;)) {
$(&#39;#backClick&#39;).addClass(&#39;disabled&#39;);
}
} else {
$(&#39;#backClick&#39;).removeClass(&#39;disabled&#39;);
}
if (pageIndex == pageCount) {
if(!$(&#39;#nextClick&#39;).hasClass(&#39;disabled&#39;)) {
$(&#39;#nextClick&#39;).addClass(&#39;disabled&#39;);
}
} else {
$(&#39;#nextClick&#39;).removeClass(&#39;disabled&#39;);
}
var pageTxt = txt.substring((pageIndex - 1) * pageSize, pageIndex * pageSize);
$(&#39;#word&#39;).html(TransferString(pageTxt));
$(&#39;html, body&#39;).animate({
&#39;scrollTop&#39;: 0
}, 0);
$("#pageCurrent").html(pageIndex);
}
function PageGo(){ if($(&#39;.jump-ipt&#39;).val()!=&#39;&#39;){
GoPage($(&#39;.jump-ipt&#39;).val())
}
}
@{
if (null != ViewBag.Ariticle)
{
DataRow dr = ViewBag.Ariticle;
if (null != dr)
{
ViewBag.Title = dr["Title"];
<p class="container">
<p class="row">
<p class="col-xs-12">
<p class="breadcrumb_block">
<span class="tit"><a href="/web/sciencefiction/index">科普IP</a> ></span>
<ol class="breadcrumb">
<li class="active">@dr["Title"]</li>
<li class="active">在线试读</li>
</ol>
<p class="clear"></p>
</p>
</p>
<p class="col-sm-8">
<input type="hidden" name="aId" id="aId" value="@Request["id"]" />
<p class="read_book">
<h3 class="read_tit">@dr["Title"]</h3>
<p class="author">
<span class="ml30"><em id="pageCurrent">1</em>/<em id="PageCount">0</em></span>
</p>
<input type="hidden" value="@dr["FilePath"]" id="urlArticleContent">
<p class="word" id="word">
<nav class="page-my">
<ul class="pagination pull-right fs14" id="demo"></ul>
<p class="clear"></p>
</nav>
<!--底部翻页-->
</p>
<p class="col-sm-3">
<input type="hidden" name="pageCount" id="pageCount" value="@ViewBag.pageCount" />
<!--阅读控制-->
<p class="read_control">
<a href="javascript:;" onclick="backClick()"><span class="icon icon01"></span><em>上一页</em></a>
<a href="javascript:;" onclick="NextClick()"><span class="icon icon02"></span><em>下一页</em></a>
<a href="javascript:;" onclick="GoHead()"><span class="icon icon03"></span><em>回首页</em></a>
</p>
</p>
</p>
</p>
}
}
}
登入後複製


txt檔案上傳時需要做一些處理,否則只能顯示UTF8格式的txt


/// <summary>
/// 文件上传
/// </summary>
/// <returns></returns>
public JsonResult UploadFiles()
{

HttpPostedFileBase postFile = HttpContext.Request.Files["filesave"];
if (postFile != null)
{
string fileName = Path.GetFileName(postFile.FileName);
string fileExt = Path.GetExtension(fileName.ToLower());
string fileSize = postFile.ContentLength.ToString();
long fileNameTem = Common.GenerateLongId();
string sPath = string.Format("/Data/Material/{0}_{1}.txt", fileNameTem.ToString(), fileName.Replace(".txt", ""));//Guid.NewGuid().ToString().Replace("-", "")
string viewUrl = string.Empty;
string g = Guid.NewGuid().ToString();
if (!Directory.Exists(Server.MapPath("~") + "/Data/Material"))
Directory.CreateDirectory(Server.MapPath("~") + "/Data/Material");
string p = Server.MapPath(sPath);
postFile.SaveAs(p);

if (System.IO.File.Exists(p))
{
StreamReader sr = new StreamReader(p, System.Text.Encoding.Default);
String input = sr.ReadToEnd();
sr.Close();

StreamWriter sw = new StreamWriter(p, false, System.Text.Encoding.UTF8);
sw.WriteLine(input);
sw.Close();
}
return Json(new { FilePath = sPath, FileName = fileName, viewurl = viewUrl, fileSize = fileSize });
}
else
{
return Json(new { FilePath = "" });
}
}
登入後複製


另外頁面首頁引入js


#
<script src="~/Scripts/web/jquery.pagination.js"></script>
<link href="~/Content/jquery.pagination.css" rel="stylesheet" />
/**
* pagination分页插件
* @version 1.1.2
* @author mss
* @url http://maxiaoxiang.com/plugin/pagination.html
* @E-mail 251445460@qq.com
*
* @调用方法
* $(selector).pagination();
* 
* @更新日志
* 2016-07-25:修复click重复事件
*/
; (function ($, window, document, undefined) {
//配置参数
var defaults = {
totalData: 0, //数据总条数
showData: 0, //每页显示的条数
pageCount: 9, //总页数,默认为9
current: 1, //当前第几页
prevCls: &#39;prev&#39;, //上一页class
nextCls: &#39;next&#39;, //下一页class
prevContent: &#39;上一页&#39;, //上一页内容
nextContent: &#39;下一页&#39;, //下一页内容
activeCls: &#39;active&#39;, //当前页选中状态
coping: false, //首页和尾页
homePage: &#39;&#39;, //首页节点内容
endPage: &#39;&#39;, //尾页节点内容
count: 5, //当前页前后分页个数
jump: true, //跳转到指定页数
jumpIptCls: &#39;jump-ipt&#39;, //文本框内容
jumpBtnCls: &#39;jump-btn&#39;, //跳转按钮
jumpBtn: &#39;跳转&#39;, //跳转按钮文本
callback: function () { 
} //回调
};
var Pagination = function (element, options) {
//全局变量
var opts = options,//配置
current,//当前页
$document = $(document),
$obj = $(element);//容器
/**
* 设置总页数
* @param int page 页码
* @return opts.pageCount 总页数配置
*/
this.setTotalPage = function (page) {
return opts.pageCount = page;
};
/**
* 获取总页数
* @return int p 总页数
*/
this.getTotalPage = function () {
var p = opts.totalData || opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
return p;
};
//获取当前页
this.getCurrent = function () {
return current;
};
/**
* 填充数据
* @param int index 页码
*/
this.filling = function (index) {
var html = &#39;&#39;;
current = index || opts.current;//当前页码
var pageCount = this.getTotalPage();
if (current > 1) {//上一页
html += &#39;<li onclick=GoPage(&#39; + (current - 1) + &#39;)><a href="javascript:;" class="&#39; + opts.prevCls + &#39;">&#39; + opts.prevContent + &#39;</a></li>&#39;;
} else {
$obj.find(&#39;.&#39; + opts.prevCls) && $obj.find(&#39;.&#39; + opts.prevCls).remove();
}
if (current >= opts.count * 2 && current != 1 && pageCount != opts.count) {
var home = opts.coping && opts.homePage ? opts.homePage : &#39;1&#39;;
html += opts.coping ? &#39;<li onclick=GoPage(&#39; + home + &#39;)><a href="javascript:;" data-page="1">&#39; + home + &#39;</a></li><span>...</span>&#39; : &#39;&#39;;
}
var start = current - opts.count,
end = current + opts.count;
((start > 1 && current < opts.count) || current == 1) && end++;
(current > pageCount - opts.count && current >= pageCount) && start++;
for (; start <= end; start++) {
if (start <= pageCount && start >= 1) {
if (start != current) {
html += &#39;<li onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;" data-page="&#39; + start + &#39;">&#39; + start + &#39;</a></li>&#39;;
} else {
html += &#39;<li class="&#39; + opts.activeCls + &#39;" onclick=GoPage(&#39; + start + &#39;)><a href="javascript:;"><span>&#39; + start + &#39;</span></a></li>&#39;;
}
}
}
if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
html += opts.coping ? &#39;<span>...</span><li onclick=GoPage(&#39; + pageCount + &#39;)><a href="javascript:;" data-page="&#39; + pageCount + &#39;">&#39; + end + &#39;</a></li>&#39; : &#39;&#39;;
}
if (current < pageCount) {//下一页
html += &#39;<li onclick=GoPage(&#39; + (current + 1) + &#39;)><a href="javascript:;" class="&#39; + opts.nextCls + &#39;">&#39; + opts.nextContent + &#39;</a></li>&#39;
} else {
$obj.find(&#39;.&#39; + opts.nextCls) && $obj.find(&#39;.&#39; + opts.nextCls).remove();
}
html += opts.jump ? &#39;<input type="text" class="&#39; + opts.jumpIptCls + &#39;"><a href="javascript:;" onclick=PageGo() class="&#39; + opts.jumpBtnCls + &#39;">&#39; + opts.jumpBtn + &#39;</a>&#39; : &#39;&#39;;
$obj.empty().html(html);
};
//绑定事件
this.eventBind = function () {
var self = this;
var pageCount = this.getTotalPage();//总页数
$obj.off().on(&#39;click&#39;, &#39;a&#39;, function () {
if ($(this).hasClass(opts.nextCls)) {
var index = parseInt($obj.find(&#39;.&#39; + opts.activeCls).text()) + 1;
} else if ($(this).hasClass(opts.prevCls)) {
var index = parseInt($obj.find(&#39;.&#39; + opts.activeCls).text()) - 1;
} else if ($(this).hasClass(opts.jumpBtnCls)) {
if ($obj.find(&#39;.&#39; + opts.jumpIptCls).val() !== &#39;&#39;) {
var index = parseInt($obj.find(&#39;.&#39; + opts.jumpIptCls).val());
} else {
return;
}
} else {
var index = parseInt($(this).data(&#39;page&#39;));
}
self.filling(index);
typeof opts.callback === &#39;function&#39; && opts.callback(self);
});
//输入跳转的页码
$obj.on(&#39;input propertychange&#39;, &#39;.&#39; + opts.jumpIptCls, function () {
var $this = $(this);
var val = $this.val();
var reg = /[^\d]/g;
if (reg.test(val)) {
$this.val(val.replace(reg, &#39;&#39;));
}
(parseInt(val) > pageCount) && $this.val(pageCount);
if (parseInt(val) === 0) {//最小值为1
$this.val(1);
}
});
//回车跳转指定页码
$document.keydown(function (e) {
var self = this;
if (e.keyCode == 13 && $obj.find(&#39;.&#39; + opts.jumpIptCls).val()) {
var index = parseInt($obj.find(&#39;.&#39; + opts.jumpIptCls).val());
GoPage(index);
//self.filling(index);
//typeof opts.callback === &#39;function&#39; && opts.callback(self);
}
});
};
//初始化
this.init = function () {
this.filling(opts.current);
this.eventBind();
};
this.init();
};
$.fn.pagination = function (parameter, callback) {
if (typeof parameter == &#39;function&#39;) {//重载
callback = parameter;
parameter = {};
} else {
parameter = parameter || {};
callback = callback || function () { };
}
var options = $.extend({}, defaults, parameter);
return this.each(function () {
var pagination = new Pagination(this, options);
callback(pagination);
});
};
})(jQuery, window, document);
登入後複製


以上所述是小編跟大家介紹的Ajax讀取txt並對txt內容進行分頁顯示,希望對大家有幫助! !

相關推薦:

ajax簡單即時驗證功能實作方法

#原生JS實作ajax與ajax的跨網域請求

JS實作Ajax跨域請求flask回應內容

以上是Ajax讀取txt並對txt內容進行分頁顯示功能的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Microsoft Edge瀏覽器開啟是360導航怎麼改-更改開啟是360導航的方法 Microsoft Edge瀏覽器開啟是360導航怎麼改-更改開啟是360導航的方法 Mar 04, 2024 pm 01:50 PM

怎麼更改MicrosoftEdge瀏覽器打開是360導航的頁面呢?其實很簡單,那麼現在小編就和大家一起分享關於更改MicrosoftEdge瀏覽器打開是360導航頁面的方法,有需要的朋友可以來看看哦,希望可以幫助大家。開啟MicrosoftEdge瀏覽器。我們看到是下圖這種頁面。點擊右上角的三點圖示。點選“設定”。在設定頁面的左側欄裡點選「啟動時」。點選右側欄裡的圖中示意的三點(不要能點選「開啟新標籤頁」),然後點選編輯,將網址改成「0」(或其他無意義的數字)。然後點選「儲存」。接下來,選擇“

解決jQuery AJAX請求遇到403錯誤的方法 解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題:解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求,通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時,有時會遇到這種情況,本文將介紹如何解決這個問題,並提供程式碼範例。解決方法:檢查權限:首先要確保請求的URL位址是正確的,同時驗證是否有足夠的權限來存取該資

PHP 與 Ajax:建立一個自動完成建議引擎 PHP 與 Ajax:建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎:伺服器端腳本:處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本:發送Ajax請求並顯示建議(autocomplete.js)。實戰案例:在HTML頁面中包含腳本並指定search-input元素識別碼。

解決jQuery AJAX請求403錯誤的方法 解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫,用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下,透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時,有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤,可能是由於安全性原則或權限問題導致的。在本文中,我們將討論如何解決jQueryAJAX請求遭遇403錯誤

Cheat Engine如何設定中文? Cheat Engine設定中文方法 Cheat Engine如何設定中文? Cheat Engine設定中文方法 Mar 13, 2024 pm 04:49 PM

  CheatEngine是一款遊戲編輯器,能夠對遊戲的記憶體進行編輯修改。但是它的預設語言是非中文的,對於很多小夥伴來說比較不方便,那麼CheatEngine怎麼設定中文呢?今天小編就跟大家詳細介紹一下CheatEngine設定中文的方法,希望可以幫助到你。  設定方法一  1、雙擊開啟軟體,點選左上角的「edit」。  2、接著點選下方選項清單中的「settings」。  3、在開啟的視窗介面中,點選左側欄中的“languages”

如何解決jQuery AJAX報錯403的問題? 如何解決jQuery AJAX報錯403的問題? Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題?在開發網頁應用程式時,經常會使用jQuery來發送非同步請求。然而,有時在使用jQueryAJAX時可能會遇到錯誤代碼403,表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的,但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題,並提供具體的程式碼範例。一、使

如何使用Ajax從PHP方法取得變數? 如何使用Ajax從PHP方法取得變數? Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景,透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中,將介紹如何使用Ajax從PHP方法中取得變量,並提供具體的程式碼範例。首先,我們需要寫一個PHP檔案來處理Ajax請求,並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼:

Microsoft Edge在哪設定顯示下載按鈕-Microsoft Edge設定顯示下載按鈕的方法 Microsoft Edge在哪設定顯示下載按鈕-Microsoft Edge設定顯示下載按鈕的方法 Mar 06, 2024 am 11:49 AM

大家知道MicrosoftEdge在哪設定顯示下載按鈕嗎?下文小編就帶來了MicrosoftEdge設定顯示下載按鈕的方法,希望對大家能夠有幫助,一起跟著小編來學習吧!第一步:先開啟MicrosoftEdge瀏覽器,點選右上角【...】標識,如下圖所示。步驟二:然後在彈出式選單中,點選【設定】,如下圖所示。第三步:接著點選介面左側【外觀】,如下圖所示。第四步:最後點選【顯示下載按鈕】右側按鈕,由灰變藍即可,如下圖所示。上面就是小編為大家帶來的MicrosoftEdge在哪設定顯示下載按鈕的

See all articles