(推薦)jquery.pagination.js分頁

時間 2019-11-21

標籤推薦 jquery.pagination.js jquery pagination 分頁欄目 JQuery 简体版

原文原文鏈接

序言javascript

原本想本身對這個分頁使用作一些總結的，但發現大神們已經總結的很好了。因此給推薦一下。css

轉自：http://www.cnblogs.com/knowledgesea/archive/2013/01/03/2841554.htmlhtml

下面是我的測試的列子：前端

前端代碼java

@{
    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

後臺代碼：jquery

[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

效果：ajax

相關標籤/搜索

jquery.pagination.js