通用分頁-基於bootstrap和jQuery

效果圖

pagination1.png

pagination2.png

需求場景

做公司後臺專案，後臺返回資料展示在頁面展示，資料量很大，所以要採用分頁，點選不同頁碼，ajax post當前頁碼以及其它必要資訊給後臺，返回該頁碼對應的資料再動態展示到頁面，實現分頁區域性重新整理。

思路

用一個div作為容器，透過配置該div的屬性用js來動態生成需要的分頁。在需要用到分頁的地方，只需要寫這樣一個div標籤就OK了。像這樣：

配置的屬性包括：分頁的總頁數、分頁顯示的頁數、當前所在頁碼。分頁所需要的html元素
用js動態生成，樣式則採用bootstrap提供的分頁的基礎樣式。bootstrap提供的分頁的基礎樣式程式碼可以生成一個靜態的分頁：

    
•     
•     
•     
•     

具體實現

cdn引入jQuery和bootstrap

注意，jQuery一定要在bootstrap之前引入，因為bootstrap所有的js外掛都依賴bootstrap

定義3個配置項變數。定義動態生成分頁html結構的函式initPagination,引數傳入一個dom物件，表示分頁的容器。

//當前頁數
        var pagenumber;        //總頁數
        var totalnumber;        //分頁欄顯示的頁數
        var paginationmax;
        paginationInit();        function initPagination(element){
            pagenumber = Number(element.attr('pagenumber'));
            totalnumber = Number(element.attr('totalnumber'));
            paginationmax = Number(element.attr('paginationmax'));            if(totalnumber >= 1 && pagenumber " +                        "

" +                            "" +                        "

";                for (var i = 0; i " +                            "" +                        ""                 }                 content +=                        "

" +                            "" +                        "

" +                    "";                 element.append(content);//                為設定為當前頁的頁籤新增樣式                 element.children('ul').children('li[value = '+ pagenumber +']').addClass('active');                 element.children('ul').children('li').click(clickChange);                 element.children('ul').children('li').click(processData);//                顯示那幾個頁籤 傳入任意li元素即可                 pageShow(element.children('ul').children('li[value = '+ pagenumber +']'))             }else{                console.log('分頁自定義屬性不合理')             }         };

寫一個函式用來呼叫上面的initPagination函式，不直接呼叫pagination時因為有可能一個頁面需要多個分頁。

//        凡是帶有pagination = p-new屬性的元素，都會生成分頁，這樣設計方便一個頁面中有多個不同的分頁
        function paginationInit(){
            $('[pagination = p-new]').each(function(){
                initPagination($(this))
            })
        };

點選不同頁籤時候的樣式變化。有兩種情況：如果點選的是普通頁籤，此時點選誰就給誰對應的li新增.active樣式。如果點選的是首位的上一頁和下一頁，那麼就
需要給當前有.active的li元素的前一個或者後一個li新增.active樣式。

//        點選頁籤時候樣式的變化
        function clickChange(ev){
            ev = event || window.event;
            pageShow($(ev.target).parent());

            $(ev.target).parent().parent().children('li').each(function(index,item){                if($(item).hasClass('active')){
                    $(item).removeClass('active');
                }
            });//                點選頁碼頁籤
            if($(ev.target).parent().attr('value') != 'pre' && $(ev.target).parent().attr('value') != 'next'){
                pagenumber = Number($(ev.target).parent().attr('value'))
                $(ev.target).parent().addClass('active');
                $(ev.target).parent().parent().children('li[value = pre]').removeClass('disabled');
                $(ev.target).parent().parent().children('li[value = next]').removeClass('disabled');//                點選上一頁頁籤
            }else if($(ev.target).parent().attr('value') == 'pre'){
                pagenumber -= 1;                if(pagenumber = totalnumber){
                    pagenumber = totalnumber;
                    $(ev.target).parent().parent().children('li[value = '+ totalnumber +']').addClass('active');
                    $(ev.target).parent().parent().children('li[value = next]').addClass('disabled');
                }else{
                    $(ev.target).parent().parent().children('li[value = '+ pagenumber.toString() +']').addClass('active');
                    $(ev.target).parent().parent().children('li[value = next]').removeClass('disabled');
                    $(ev.target).parent().parent().children('li[value = pre]').removeClass('disabled');
                }
            }
        }

接下來這個有點意思。展示哪些頁碼。比如總共100頁資料，我們的分頁欄始終顯示10頁，那麼這10頁就需要動態的根據當前頁、總頁數而變化。我是找了一個其他的分頁點了點去找第幾頁的時候顯示哪些頁碼這個規律的。
程式碼看起來有點亂，不過自己找個其他網站的分頁點幾下就知道怎麼寫了。

//       展示哪些頁碼 要用一個實際的分頁找規律
        function pageShow(element){            if(Number(pagenumber) >= 1 && Number(pagenumber) = 1 + Number(paginationmax) && Number($(item).attr('value'))  parseInt(.5 * Number(paginationmax)) && Number(pagenumber) = 1 && Number($(item).attr('value'))  Number(pagenumber) + parseInt(.5 * Number(paginationmax)) && Number($(item).attr('value'))  Number(totalnumber) - parseInt(.5 * Number(paginationmax))){
                element.parent().children('li').each(function(index,item){                    if(Number($(item).attr('value')) >= 1 && Number($(item).attr('value')) 
我給每個li頁籤繫結了一個專門用來處理ajax的點選事件，當前所在的頁碼在全域性可以獲取到。可以處理切換頁籤時候傳送ajax，根據不同頁碼返回不同資料。
//       頁面切換時候的處理函式。比如發ajax根據不同頁碼獲取不同資料展示資料等，使用者自行配置。
        function processData(){            console.log('當前頁碼',pagenumber);//            使用者在這裡寫頁碼切換時候的邏輯
        }
一個簡單的通用分頁就完成了，引入js後只需要寫一個可配置屬性的div標籤就可以實現bootstrap風格的動態分頁。還有很多地方需要完善，比如目前變數還宣告在全域性等等，時間原因就先到此為止啦。
完整程式碼我上傳到了github。


作者：閆浩奇
連結：