通用分頁-基于bootstrap和jQuery

效果圖

pagination1.png
pagination2.png

需求場景

做公司后臺項目雷滋,后臺返回數(shù)據(jù)展示在頁面展示类缤,數(shù)據(jù)量很大臼勉,所以要采用分頁,點擊不同頁碼餐弱,ajax post當(dāng)前頁碼以及其它必要信息給后臺宴霸,返回該頁碼對應(yīng)的數(shù)據(jù)再動態(tài)展示到頁面,實現(xiàn)分頁局部刷新膏蚓。

思路

用一個div作為容器瓢谢,通過配置該div的屬性用js來動態(tài)生成需要的分頁。在需要用到分頁的地方驮瞧,只需要寫這樣一個div標(biāo)簽就OK了氓扛。像這樣:

<div class="test" pagination="p-new" pagenumber="5" totalnumber="15" paginationmax="10"></div>

配置的屬性包括:分頁的總頁數(shù)、分頁顯示的頁數(shù)论笔、當(dāng)前所在頁碼幢尚。分頁所需要的html元素
用js動態(tài)生成,樣式則采用bootstrap提供的分頁的基礎(chǔ)樣式翅楼。bootstrap提供的分頁的基礎(chǔ)樣式代碼可以生成一個靜態(tài)的分頁:

<ul class="pagination">
    <li><a href="#">?</a></li>
    <li><a href="#">1</a></li>
    <li><a href="#">2</a></li>
    <li class="active"><a href="#">3</a></li>
    <li class="disabled"><a href="#">?</a></li>
</ul>

具體實現(xiàn)

cdn引入jQuery和bootstrap

    <link rel="stylesheet" >
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

注意,jQuery一定要在bootstrap之前引入真慢,因為bootstrap所有的js插件都依賴bootstrap

定義3個配置項變量毅臊。定義動態(tài)生成分頁html結(jié)構(gòu)的函數(shù)initPagination,參數(shù)傳入一個dom對象,表示分頁的容器黑界。

//當(dāng)前頁數(shù)
        var pagenumber;
        //總頁數(shù)
        var totalnumber;
        //分頁欄顯示的頁數(shù)
        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 <= totalnumber && paginationmax <= totalnumber){
                var content =
                    "<ul class='pagination'>" +
                        "<li value='pre'>" +
                            "<a href='javascript:void(0);'>?</a>" +
                        "</li>";
                for (var i = 0; i < totalnumber; i++) {
                    content +=
                        "<li value='"+ (i + 1) +"'>" +
                            "<a href='javascript:void(0);'>" + (i + 1) +
                            "</a>" +
                        "</li>"
                }
                content +=
                        "<li value='next'>" +
                            "<a href='javascript:void(0);'>?</a>" +
                        "</li>" +
                    "</ul>";
                element.append(content);
//                為設(shè)置為當(dāng)前頁的頁簽添加樣式
                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('分頁自定義屬性不合理')
            }
        };

寫一個函數(shù)用來調(diào)用上面的initPagination函數(shù)管嬉,不直接調(diào)用pagination時因為有可能一個頁面需要多個分頁。

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

點擊不同頁簽時候的樣式變化。有兩種情況:如果點擊的是普通頁簽烛占,此時點擊誰就給誰對應(yīng)的li添加.active樣式胎挎。如果點擊的是首位的上一頁和下一頁,那么就
需要給當(dāng)前有.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 <= 1){
                    pagenumber = 1;
                    $(ev.target).parent().parent().children('li[value = 1]').addClass('active');
                    $(ev.target).parent().parent().children('li[value = pre]').addClass('disabled');
                }else{
                    $(ev.target).parent().parent().children('li[value = '+ pagenumber.toString() +']').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') == 'next'){
                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頁數(shù)據(jù)芽卿,我們的分頁欄始終顯示10頁揭芍,那么這10頁就需要動態(tài)的根據(jù)當(dāng)前頁、總頁數(shù)而變化卸例。我是找了一個其他的分頁點了點去找第幾頁的時候顯示哪些頁碼這個規(guī)律的称杨。
代碼看起來有點亂肌毅,不過自己找個其他網(wǎng)站的分頁點幾下就知道怎么寫了。

//       展示哪些頁碼 要用一個實際的分頁找規(guī)律
        function pageShow(element){
            if(Number(pagenumber) >= 1 && Number(pagenumber) <= parseInt(.5 * Number(paginationmax))){
                element.parent().children('li').each(function(index,item){
                    if(Number($(item).attr('value')) >= 1 + Number(paginationmax) && Number($(item).attr('value')) <= Number(totalnumber)){
                        $(item).css('display','none')
                    }else{
                        $(item).css('display','inline-block')
                    }
                });
            }else if(Number(pagenumber) > parseInt(.5 * Number(paginationmax)) && Number(pagenumber) <= Number(totalnumber) - parseInt(.5 * Number(paginationmax))){
                element.parent().children('li').each(function(index,item){
                    if((Number($(item).attr('value')) >= 1 && Number($(item).attr('value')) <= Number(pagenumber) - parseInt(.5 * Number(paginationmax))) || (Number($(item).attr('value')) > Number(pagenumber) + parseInt(.5 * Number(paginationmax)) && Number($(item).attr('value')) <= Number(totalnumber))){
                        $(item).css('display','none')
                    }else{
                        $(item).css('display','inline-block')
                    }
                });
            }else if(Number(pagenumber) > Number(totalnumber) - parseInt(.5 * Number(paginationmax))){
                element.parent().children('li').each(function(index,item){
                    if(Number($(item).attr('value')) >= 1 && Number($(item).attr('value')) <= Number(totalnumber) - Number(paginationmax)){
                        $(item).css('display','none')
                    }else{
                        $(item).css('display','inline-block')
                    }
                });
            }
        }

我給每個li頁簽綁定了一個專門用來處理ajax的點擊事件姑原,當(dāng)前所在的頁碼在全局可以獲取到悬而。可以處理切換頁簽時候發(fā)送ajax页衙,根據(jù)不同頁碼返回不同數(shù)據(jù)摊滔。

//       頁面切換時候的處理函數(shù)。比如發(fā)ajax根據(jù)不同頁碼獲取不同數(shù)據(jù)展示數(shù)據(jù)等店乐,用戶自行配置艰躺。
        function processData(){
            console.log('當(dāng)前頁碼',pagenumber);
//            用戶在這里寫頁碼切換時候的邏輯
        }

一個簡單的通用分頁就完成了,引入js后只需要寫一個可配置屬性的div標(biāo)簽就可以實現(xiàn)bootstrap風(fēng)格的動態(tài)分頁眨八。還有很多地方需要完善腺兴,比如目前變量還聲明在全局等等,時間原因就先到此為止啦廉侧。
完整代碼我上傳到了github页响。https://github.com/yanhaoqi/pagination-bootstorp.git

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市段誊,隨后出現(xiàn)的幾起案子闰蚕,更是在濱河造成了極大的恐慌,老刑警劉巖连舍,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件没陡,死亡現(xiàn)場離奇詭異,居然都是意外死亡索赏,警方通過查閱死者的電腦和手機(jī)盼玄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來潜腻,“玉大人埃儿,你說我怎么就攤上這事∪诨粒” “怎么了童番?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長威鹿。 經(jīng)常有香客問我妓盲,道長,這世上最難降的妖魔是什么专普? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任悯衬,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘筋粗。我一直安慰自己策橘,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布娜亿。 她就那樣靜靜地躺著丽已,像睡著了一般。 火紅的嫁衣襯著肌膚如雪买决。 梳的紋絲不亂的頭發(fā)上沛婴,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天,我揣著相機(jī)與錄音督赤,去河邊找鬼嘁灯。 笑死,一個胖子當(dāng)著我的面吹牛躲舌,可吹牛的內(nèi)容都是我干的丑婿。 我是一名探鬼主播,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼没卸,長吁一口氣:“原來是場噩夢啊……” “哼羹奉!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起约计,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤诀拭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后煤蚌,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體耕挨,經(jīng)...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年铺然,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片酒甸。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡魄健,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出插勤,到底是詐尸還是另有隱情沽瘦,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布农尖,位于F島的核電站析恋,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏盛卡。R本人自食惡果不足惜助隧,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望滑沧。 院中可真熱鬧并村,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至膝昆,卻和暖如春丸边,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背荚孵。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工妹窖, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人处窥。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓嘱吗,卻偏偏與公主長得像,于是被迫代替她去往敵國和親滔驾。 傳聞我的和親對象是個殘疾皇子谒麦,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內(nèi)容