您当前的位置:首页 > 网站建设 > ajax
| php | asp | css | H5 | javascript | Mysql | Dreamweaver | Delphi | 网站维护 | 帝国cms | React | 考试系统 | ajax | jQuery | 小程序 |

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

51自学网 2022-02-21 10:52:53
  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,"&nbsp;")string=string.replace(// +/g,"&nbsp;")}catch(e) {alert(e.message);}return string;}var pageIndex = 1;var id = $("#aId").val();var url = $('#urlArticleContent').val();var txt = '';var pageSize = @(ConfigurationManager.AppSettings["ArticlepageSize"]);var page=5;var pageCount = 0;$(function() {if(url!=""){txt = ($.ajax({ url: url, async: false })).responseText;if (txt.indexOf('http://www.w3.org/1999/xhtml')==-1) {pageCount = Math.ceil(txt.length / pageSize);$("#PageCount").html(pageCount);$('#word').html(TransferString(txt.substring(0, pageSize)));$('#demo').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 yourselfvar html = template(data);dataContainer.html(html);}})} else {txt = '';}}})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 = $('#goPage').val();if (pageIndexStr==undefined) {return false;}pageIndexStr = pageIndexStr.trim();var pageIndex = parseInt(pageIndexStr);}$('#page'+pageIndex).siblings().removeClass('active');$('#page'+pageIndex).addClass('active');if (pageIndex==1) {if(!$('#backClick').hasClass('disabled')) {$('#backClick').addClass('disabled');}} else {$('#backClick').removeClass('disabled');}if (pageIndex == pageCount) {if(!$('#nextClick').hasClass('disabled')) {$('#nextClick').addClass('disabled');}} else {$('#nextClick').removeClass('disabled');}var pageTxt = txt.substring((pageIndex - 1) * pageSize, pageIndex * pageSize);$('#word').html(TransferString(pageTxt));$('html, body').animate({'scrollTop': 0}, 0);$("#pageCurrent").html(pageIndex);}function PageGo(){ if($('.jump-ipt').val()!=''){GoPage($('.jump-ipt').val())}}@{if (null != ViewBag.Ariticle){DataRow dr = ViewBag.Ariticle;if (null != dr){ViewBag.Title = dr["Title"];<div class="container"><div class="row"><div class="col-xs-12"><div class="breadcrumb_block"><span class="tit"><a href="/web/sciencefiction/index">科普IP</a> &gt;</span><ol class="breadcrumb"><li class="active">@dr["Title"]</li><li class="active">在线试读</li></ol><div class="clear"></div></div></div><div class="col-sm-8"><input type="hidden" name="aId" id="aId" value="@Request["id"]" /><div class="read_book"><h3 class="read_tit">@dr["Title"]</h3><div class="author"><span class="ml30"><em id="pageCurrent">1</em>/<em id="PageCount">0</em></span></div><input type="hidden" value="@dr["FilePath"]" id="urlArticleContent"><div class="word" id="word"><nav class="page-my"><ul class="pagination pull-right fs14" id="demo"></ul><div class="clear"></div></nav><!--底部翻页--></div><div class="col-sm-3"><input type="hidden" name="pageCount" id="pageCount" value="@ViewBag.pageCount" /><!--阅读控制--><div 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></div></div></div></div>}}}

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, //总页数,默认为9current: 1, //当前第几页prevCls: 'prev', //上一页classnextCls: 'next', //下一页classprevContent: '上一页', //上一页内容nextContent: '下一页', //下一页内容activeCls: 'active', //当前页选中状态coping: false, //首页和尾页homePage: '', //首页节点内容endPage: '', //尾页节点内容count: 5, //当前页前后分页个数jump: true, //跳转到指定页数jumpIptCls: 'jump-ipt', //文本框内容jumpBtnCls: 'jump-btn', //跳转按钮jumpBtn: '跳转', //跳转按钮文本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 = '';current = index || opts.current;//当前页码var pageCount = this.getTotalPage();if (current > 1) {//上一页html += '<li onclick=GoPage(' + (current - 1) + ')><a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a></li>';} else {$obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();}if (current >= opts.count * 2 && current != 1 && pageCount != opts.count) {var home = opts.coping && opts.homePage ? opts.homePage : '1';html += opts.coping ? '<li onclick=GoPage(' + home + ')><a href="javascript:;" data-page="1">' + home + '</a></li><span>...</span>' : '';}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 += '<li onclick=GoPage(' + start + ')><a href="javascript:;" data-page="' + start + '">' + start + '</a></li>';} else {html += '<li class="' + opts.activeCls + '" onclick=GoPage(' + start + ')><a href="javascript:;"><span>' + start + '</span></a></li>';}}}if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {var end = opts.coping && opts.endPage ? opts.endPage : pageCount;html += opts.coping ? '<span>...</span><li onclick=GoPage(' + pageCount + ')><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a></li>' : '';}if (current < pageCount) {//下一页html += '<li onclick=GoPage(' + (current + 1) + ')><a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a></li>'} else {$obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();}html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" onclick=PageGo() class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';$obj.empty().html(html);};//绑定事件this.eventBind = function () {var self = this;var pageCount = this.getTotalPage();//总页数$obj.off().on('click', 'a', function () {if ($(this).hasClass(opts.nextCls)) {var index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;} else if ($(this).hasClass(opts.prevCls)) {var index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;} else if ($(this).hasClass(opts.jumpBtnCls)) {if ($obj.find('.' + opts.jumpIptCls).val() !== '') {var index = parseInt($obj.find('.' + opts.jumpIptCls).val());} else {return;}} else {var index = parseInt($(this).data('page'));}self.filling(index);typeof opts.callback === 'function' && opts.callback(self);});//输入跳转的页码$obj.on('input propertychange', '.' + opts.jumpIptCls, function () {var $this = $(this);var val = $this.val();var reg = /[^/d]/g;if (reg.test(val)) {$this.val(val.replace(reg, ''));}(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('.' + opts.jumpIptCls).val()) {var index = parseInt($obj.find('.' + opts.jumpIptCls).val());GoPage(index);//self.filling(index);//typeof opts.callback === 'function' && opts.callback(self);}});};//初始化this.init = function () {this.filling(opts.current);this.eventBind();};this.init();};$.fn.pagination = function (parameter, callback) {if (typeof parameter == 'function') {//重载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内容进行分页显示,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对51zixue.net网站的支持!


下载地址:
深入理解ajax系列第一篇之XHR对象
AJAX请求队列实现
万事OK自学网:51自学网_软件自学网_CAD自学网自学excel、自学PS、自学CAD、自学C语言、自学css3实例,是一个通过网络自主学习工作技能的自学平台,网友喜欢的软件自学网站。