(推荐)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>

后台代码：

[HttpPost]

        public JsonResult GetPage(int pageIndex, int pageSize)

        {

            IList<string> list = new List<string>();

            int n = (pageIndex - ) * pageSize + ;

            for (int i = n; i <= n + pageSize - ; i++)

            {

                list.Add("aaaa" + i);

            };

            return Json(list);

        }

效果：

巴特西

(推荐)jquery.pagination.js分页

最新文章

热门文章