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

Original 2016-11-16 16:01:52 363
abstract:function TransferString(content)     {         var string = content;         try
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 yourself
                        var 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())
        }
    }

JavaScript Code
@{
    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 = "" });
            }
        }

C# Code

效果图:

wKioL1gquUnA2iquAADM6BeOegg095.png-wh_651x-s_3494154119.png

另外页面首页引入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: 'prev',            //上一页class
        nextCls: 'next',            //下一页class
        prevContent: '上一页',        //上一页内容
        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, ''));
       &a				
			
Release Notes

Popular Entries