Ajax讀取txt並對txt內容進行分頁顯示功能_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 = $('#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> ></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內容進行分頁顯示，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！