简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Rumah
Artikel
Soal Jawab
Kursus
Topik
Muat turun
Permainan
Kamus
kemas kini terkini

Rumah  >  Artikel  >  hujung hadapan web  >  Ajax读取txt并对txt内容进行分页显示功能

Ajax读取txt并对txt内容进行分页显示功能

韦小宝
韦小宝asal
2018-01-08 10:48:061946semak imbas

这篇文章给大家介绍了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响应内容

Atas ialah kandungan terperinci Ajax读取txt并对txt内容进行分页显示功能. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：webpack中的hash、chunkhash、contenthash区别分享Artikel seterusnya：怎样通过正则表达式删除内容里的空行

Artikel berkaitan

Lihat lagi