• 使用jquery.pagination.js实现无刷新分页


    1.页面

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title>Porschev----无刷新翻页</title>
        <script src="~/Scripts/Test/jquery-1.4.1.min.js"></script>
        <script src="~/Scripts/Test/jquery.pagination.js"></script>
        <script src="~/Scripts/Test/tablecloth.js"></script>
        <link href="~/Scripts/Test/pagination.css" rel="stylesheet" />
        <link href="~/Scripts/Test/tablecloth.css" rel="stylesheet" />
        <script type="text/javascript">
            var pageIndex = 0;     //页面索引初始值
            var pageSize = 10;     //每页显示条数初始化,修改显示条数,修改这里即可


            $(function () {
                InitTable(0);    //Load事件,初始化表格数据,页面索引为0(第一页)

                //分页,PageCount是总条目数,这是必选参数,其它参数都是可选
                $("#Pagination").pagination(PageCount, {
                    callback: PageCallback,
                    prev_text: '上一页',       //上一页按钮里text
                    next_text: '下一页',       //下一页按钮里text
                    items_per_page: pageSize,  //显示条数
                    num_display_entries: 6,    //连续分页主体部分分页条目数
                    current_page: pageIndex,   //当前页索引
                    num_edge_entries: 2        //两侧首尾分页条目数
                });

                //翻页调用
                function PageCallback(index, jq) {
                    InitTable(index);
                }

                //请求数据
                function InitTable(pageIndex) {
                    $.ajax({
                        type: "Get",
                        dataType: "text",
                        url: '/Test/GetData',      //提交到一般处理程序请求数据
                        data: "pageIndex=" + (pageIndex + 1) + "&pageSize=" + pageSize,          //提交两个参数:pageIndex(页面索引),pageSize(显示条数)               
                        success: function (data) {
                            $("#Result tr:gt(0)").remove();        //移除Id为Result的表格里的行,从第二行开始(这里根据页面布局不同页变)
                            $("#Result").append(data);             //将返回的数据追加到表格
                        }
                    });
                }

            });

        </script>
    </head>
    <body>
        <div align="center">
            <h1>Posrchev----无刷新分页</h1>
        </div>
        <div id="container">
            <table id="Result" cellspacing="0" cellpadding="0">
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                </tr>
            </table>
            <div id="Pagination"></div>
        </div>

    </body>
    </html>

     

     

     

     public ActionResult GetData()
            {
                string str = string.Empty;

                //具体的页面数
                int pageIndex;
                int.TryParse(Request["pageIndex"], out pageIndex);

                //页面显示条数
                int size = Convert.ToInt32(Request["pageSize"]);

                if (pageIndex == 0)
                {
                    pageIndex = 1;
                }
                StringBuilder sb = new StringBuilder();
                for (int i = 0; i < 10; i++)
                {
                    sb.Append("<tr><td>");
                    sb.Append(i.ToString());
                    sb.Append("</td><td>");
                    sb.Append((i+1).ToString());
                    sb.Append("</td></tr>");
                }
                str = sb.ToString();
                return Content(str);
            }

    数据量大的时候最好使用json格式返回数据

  • 相关阅读:
    ERROR Function not available to this responsibility.Change responsibilities or contact your System Administrator.
    After Upgrade To Release 12.1.3 Users Receive "Function Not Available To This Responsibility" Error While Selecting Sub Menus Under Diagnostics (Doc ID 1200743.1)
    产品设计中先熟练使用铅笔 不要依赖Axure
    12.1.2: How to Modify and Enable The Configurable Home Page Delivered Via 12.1.2 (Doc ID 1061482.1)
    Reverting back to the R12.1.1 and R12.1.3 Homepage Layout
    常见Linux版本
    网口扫盲二:Mac与Phy组成原理的简单分析
    VMware 8安装苹果操作系统Mac OS X 10.7 Lion正式版
    VMware8安装MacOS 10.8
    回顾苹果操作系统Mac OS的发展历史
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3087000.html
Copyright © 2020-2023  润新知