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

你可能感兴趣的:(pagination)