zoukankan      html  css  js  c++  java
  • 使用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格式返回数据

  • 相关阅读:
    【题解】【BT】【Leetcode】Populating Next Right Pointers in Each Node
    【题解】【BT】【Leetcode】Binary Tree Level Order Traversal
    【题解】【BST】【Leetcode】Unique Binary Search Trees
    【题解】【矩阵】【回溯】【Leetcode】Rotate Image
    【题解】【排列组合】【素数】【Leetcode】Unique Paths
    【题解】【矩阵】【回溯】【Leetcode】Unique Paths II
    【题解】【BST】【Leetcode】Validate Binary Search Tree
    【题解】【BST】【Leetcode】Convert Sorted Array to Binary Search Tree
    第 10 章 判断用户是否登录
    第 8 章 动态管理资源结合自定义登录页面
  • 原文地址:https://www.cnblogs.com/yxlblogs/p/3087000.html
Copyright © 2011-2022 走看看