(推荐)jquery.pagination.js分页

序言

本来想自己对这个分页使用做一些总结的，但发现大神们已经总结的很好了。所以给推荐一下。

转自：http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.html

下面是个人测试的列子：

前端代码

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>JsPage</title>
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.pagination.js"></script>
    <link href="~/Style/pagination.css" rel="stylesheet" />
    <script type="text/javascript">

        var pageIndex = 1;     //页面索引初始值   
        var pageSize = 10;     //每页显示条数初始化，修改显示条数，修改这里即可   
        var PageCount = 100;
        $(document).ready(function () {
            InitTable(pageIndex);    //Load事件，初始化表格数据，页面索引为0（第一页）
            InitPager();
        });

        function InitPager() {
            //分页，PageCount是总条目数，这是必选参数，其它参数都是可选
            $("#pager").pagination(PageCount, {
                callback: PageCallback,  //PageCallback() 为翻页调用次函数。
                prev_text: "上一页",
                next_text: "下一页",
                items_per_page: pageSize,
                num_edge_entries: 2,       //两侧首尾分页条目数
                num_display_entries: 3,    //连续分页主体部分分页条目数
                current_page: pageIndex - 1,   //当前页索引
            });
        }
        //翻页调用   
        function PageCallback(index, jq) {
            InitTable(index + 1);
        }
        //请求数据   
        function InitTable(pageIndex) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "/Page/GetPage",
                dataType: "json",
                data: "{pageIndex:'" + pageIndex + "',pageSize:'" + pageSize + "'}",          //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)                   
                success: function (data) {
                    $("#divtest").html("");
                    var str = "";
                    $.each(data, function (i, item) {
                        str = str + "<span>" + item + "<span><br />";
                    });
                    $("#divtest").append(str);
                }
            });
        }

    </script>
</head>
<body>
    <div id="divtest"></div>
    <div id="pager">
    </div>
</body>
</html>

View Code

后台代码：

[HttpPost]
        public JsonResult GetPage(int pageIndex, int pageSize)
        {
            IList<string> list = new List<string>();
            int n = (pageIndex - 1) * pageSize + 1;
            for (int i = n; i <= n + pageSize - 1; i++)
            {
                list.Add("aaaa" + i);
            };
            return Json(list);
        }

View Code

效果：

(推荐)jquery.pagination.js分页

秒客网

(推荐)jquery.pagination.js分页

相关文章