jQuery前端分頁範例分享_jquery

大家在作分頁時，多數是在後台回傳一個導覽條的html字串，其實在前端用js也很好實現。

呼叫pager方法，輸入參數，會傳回一個導航條的html字串。方法的內部比較簡單。

複製程式碼 程式碼如下:

/**
* pageSize,  每頁顯示數
* pageIndex, 目前頁數 
* pageCount  總頁數
* url  連接位址
* pager(10, 1, 5, 'Index')使用方法範例
*/
function pager(pageSize, pageIndex, pageCount, url) {
    var intPage = 7;  //數字顯示
    var intBeginPage = 0;//開始的頁數
    var intEndPage = 0;//結束的頁數
    var intCrossPage = parseInt(intPage / 2); //顯示的數字
var strPage = "

第" pageIndex "/" pageCount " 頁每頁" pageSize " 條";
    if (pageIndex > 1) {
        strPage = strPage "首頁 ";
strPage = strPage "上一頁 ";
    }
    if (pageCount > intPage) {//總頁數大於頁面顯示的頁數
        if (pageIndex > pageCount - intCrossPage) {//目前頁數>總頁數-3
            intBeginPage = pageCount - intPage 1;
            intEndPage = pageCount;
        }
        else {
            if (pageIndex                 intBeginPage = 1;
                intEndPage = intPage;
            }
            else {
                intBeginPage = pageIndex - intCrossPage;
                intEndPage = pageIndex intCrossPage;
            }
        }
    } else {
        intBeginPage = 1;
        intEndPage = pageCount;
    }
    if (pageCount > 0) {
        for (var i = intBeginPage; i             {
                if (i == pageIndex) {//目前頁
                    strPage = strPage " " i " "
;
;
;
;
;                 }
                else {
strPage = strPage " " i " ";
                }
            }
        }     }     if (pageIndex strPage = strPage "下一頁 ";        strPage = strPage "尾頁";
    }
    return strPage "

";
}

試試這個方法試試

複製程式碼

http://www.w3.org/1999/xhtml">

   
    標題>
   
   
   
        $(函數 () {
            loadData(1, 10);
            //分頁條點選事件
            $(document.body).on('click', '.pageNav', function () {
                var pageSize = Number(getQueryString('pageSize', $(this).attr('href')));
                var pageIndex = Number(getQueryString('pageIndex', $(this).attr('href')));
                loadData(pageIndex, pageSize);
                return false;//不跳轉頁
            });
        });
        //載入資料
        函數 loadData(pageIndex, pageSize) {
            $.getJSON('Content/CustomersData.txt', { pageIndex: pageIndex, pageSize: pageSize }, function (data) {
                var beginIndex = (pageIndex - 1) * pageSize;
                var endIndex = pageIndex * pageSize - 1;
                var tbodyHtml = '';
                for (var i = beginIndex; i                     if (!data.Rows[i]) {
                        休息；
                    }
var tbody = '

{0} {1} {2} {3 } {4} {5}';
tbody = '{6} {7} {8} {9}> ;{10} ';
                                tbody = tbody.format(data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].CustomerID, data.Rows[i].CompanyName, data.Rows[i].ContactName>                         data.Rows[i].ContactTitle、data.Rows[i].Address、data.Rows[i].City、
                        資料。並使用[i].區域內？ data.Rows[i].Region : '', data.Rows[i].PostalCode, data.Rows[i].Country,
                        data.Rows[i].電話、data.Rows[i].傳真？ data.Rows[i].Fax : '');
                    tbodyHtml = tbody;
                }
                $('#tb').find('tbody').first().html(tbodyHtml);
                var pageCount = parseInt((data.Total / pageSize)) (data.Total % pageSize ? 1 : 0);
                $('#dvPager').html(pager(pageSize, pageIndex, pageCount, 'CustomersData.txt'));
            }
            );
        }
        //字串格式化
        String.prototype.format = function (args) {
            var 結果 = this;
            var reg;
            if (arguments.length > 0) {
                if (arguments.length == 1 && typeof (args) == "object") {
                    for (var key in args) {
                        if (args[key] !== 未定義) {
                            reg = new RegExp("({" key "})", "g");
                            result = result.replace(reg, args[key]);
                        }
                    }
                }其他{
                    for (var i = 0; i                         if (參數[i] !== 未定義) {
                            reg = new RegExp("({)" i "(})", "g");
                            結果 = result.replace(reg,arguments[i]);
                        }
                    }
                }
            }
            回傳結果；
        };
        //取得url參數
        函數 getQueryString(name, url) {
            var reg = new RegExp("(^|&)" name "=([^&]*)(&|$)", "i");
            url = url && url.indexOf('?') >= 0 ? url.substring(url.indexOf('?'), url.length) : window.location.search;
            var r = url.substr(1).match(reg);
            if (r != null) return unescape(r[2]);返回空；
        }
    >腳本
頭>

   
       
           
               
               
               
               
               
               
               
               
               
               
               
           
        頭>
       
    表>
   

身體>

[/代碼]

看下效果

列有點多，我只截圖了部分，介面好漂亮，加點樣式，用bootstrap來美化下

使用Nuget安裝bootstrap

加上造型後

雖然說不是特別漂亮，但還是對得起觀眾吧。

代碼下載https://github.com/dengjianjun/JsPager

如果覺得對你有幫助，請點個贊，謝謝！

顧客ID	公司名稱	聯絡人姓名	ContactTitle	位址	城市	區域	郵遞區號	國家	手機	傳真