是時候更新你的Js工具了-分頁【基于JQ】

好久沒有來逛園子，也好久沒有更新部落格，就像沉睡已久的人忽然被叫醒，忽然就被園友的回複驚醒了。園友提出了關于我之前一篇文章的疑問——可那已經是半年以前的部落格了，加上我一直覺得分享給大家的應該是我最新的思路，于是促使我寫下此文，希望對遇到同樣問題的小夥伴們有幫助。

進入正題。

看過上一篇文章的童鞋們應該都清楚，之前的做法是通過輸入不同的标簽來生成dom，最終展示資料供使用者檢視的，可在後面的工作中，我越來越多的感到這種方式在某些需求場景中的力不從心（尤其在你嘗試用不同方式展示資料時），是以改變了思路，從模闆生成變為自定義生成。

先來看下代碼是怎麼寫的：

///分頁工具生成
    //dataEle-資料盒子
    //pageEle-分頁盒子
    //obj-調用方法傳遞
    //url-傳遞方法内參
    //cndt-傳遞方法内參
    //ishow-傳遞方法内慘
    pagerTool: function (dataEle, pageEle, obj, url, cndt, ishow) {
        var total = $(pageEle).attr('total') - 0;//總數
        var rowcount = $(pageEle).attr('rowcount') - 0;//頁尺寸 
        var index = $(pageEle).attr('index') - 0;//頁碼
        var count = total % rowcount == 0 ? total / rowcount : Math.floor(total / rowcount) + 1;//總頁數
        var Html = '';
        Html += '<p class="page">';
        Html += '<a href="javaScript:void(0)" class="prePage">上一頁</a>';
        //總量大于15頁時，生成轉跳選擇框并隐藏多餘頁碼按鈕
        if (count > 15) {
            //優化視覺效果
            if (index <= 8) {
                for (var i = 1; i <= 15; i++) {
                    if (index != i) {
                        Html += '<a href="javaScript:void(0)" class="nowPage">' + i + '</a>';
                    } else {
                        Html += '<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">' + i + '</a>';
                    }
                }
            } else {
                var s = index - 8 + 1;
                if (s + 14 > count) {
                    var c = s + 14 - count;
                    s = s - c;
                }
                for (var i = s ; i <= s + 14; i++) {
                    if (index != i) {
                        Html += '<a href="javaScript:void(0)" class="nowPage">' + i + '</a>';
                    } else {
                        Html += '<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">' + i + '</a>';
                    }
                }
            }
            Html += '<a href="javaScript:void(0)">轉到</a>';
            Html += '<select class="nowPage">';
            for (var i = 1; i <= count; i++) {
                Html += '<option>' + i + '</option>';
            }
            Html += '</select>';
            Html += '<a href="javaScript:void(0)">頁</a>';
        } else {
            for (var i = 1; i <= count; i++) {
                if (index != i) {
                    Html += '<a href="javaScript:void(0)" class="nowPage">' + i + '</a>';
                } else {
                    Html += '<a href="javaScript:void(0)" class="nowPage" style="background:#ACDDEA; color:#226F83; border:#93D3E4 1px solid;">' + i + '</a>';
                }
            }
        }
        Html += '<a href="javaScript:void(0)" class="nextPage">下一頁</a>';
        Html += '共有' + total + '條資料';
        Html += '</p>';
        $(pageEle).html(Html);
        $(pageEle).find('select').val(index);
        //上一頁
        $(pageEle).find('a[class=prePage]').bind('click', function () {
            var index = $(this).parent().parent().attr('index') - 0;
            if (index > 1) {
                $(this).parent().parent().attr('index', index - 1);
                cndt.index = cndt.index - 1;
                obj(url, cndt, dataEle, pageEle, ishow);
            } else {
                alert('還想去哪兒啊，這是第一頁~');
            }
        });
        //下一頁
        $(pageEle).find('a[class=nextPage]').bind('click', function () {
            var index = $(this).parent().parent().attr('index') - 0;
            if (index < count) {
                $(this).parent().parent().attr('index', index + 1);
                cndt.index = (cndt.index - 0) + 1;
                obj(url, cndt, dataEle, pageEle, ishow);
            } else {
                alert('别翻了，後面沒有了~');
            }
        });
        //目前頁
        $(pageEle).find('a[class=nowPage]').bind('click', function () {
            var index = $(this).parent().parent().attr('index') - 0;
            $(this).parent().parent().attr('index', $(this).text());
            cndt.index = $(this).text();
            obj(url, cndt, dataEle, pageEle, ishow);
        });
        //指定頁轉跳
        $(pageEle).find('select[class=nowPage]').bind('change', function () {
            console.log(11111111111);
            var index = $(this).parent().parent().attr('index') - 0;
            $(this).parent().parent().attr('index', $(this).val());
            cndt.index = $(this).val();
            obj(url, cndt, dataEle, pageEle, ishow);
        });
    }      

這個方法是分頁工具的生成，正常生成後大概是這樣：

直接調用上面的函數是無效的，實際上你僅需要調用這個函數：

///擷取分頁資料
    //url-接口位址
    //cndt-參數集合
    //ele-資料盒子
    //page-分頁盒子
    //ishow-自定義顯示方式
    getPage: function (url, cndt, ele, page, ishow) {
        Tool.myAjax(url, cndt, 'post', function (data) {
            var Html = ishow(data.rows);
            $(ele).html(Html);
            $(page).attr('index', cndt.index).attr('rowcount', cndt.size).attr('total', data.all_count);
            Tool.pagerTool($(ele), $(page), Tool.getPage, url, cndt, ishow);
            $(ele).parent().parent().animate({ scrollTop: 0 }, 300);
        });
    }      

接下來就是外部調用時的寫法：

var data = { 'index': 1, 'size': 10 };
    Tool.getPage(你的接口位址, data, 用來存放資料的dom, 用來存放分頁的dom, function (json) {
        var html = '';
        for (var i = 0; i < json.length; i++) {
            html += '<tr>';
            html += '<td>' + json[i].a+ '</td>';
            html += '<td>' + json[i].b + '</td>';
            html += '<td>' + json[i].c+ '</td>';
            html += '</tr>';
        }
        return html;
    });      

如上，在 for 内部你可以自定義如何填充dom，data也是自定義的（不過 index 和 size 是必選項），最後的 return 别删掉了，它是傳參給内部方法的最後一步。

最後需要注意的是，任何前端分頁都需要後端支援，如果使用本工具，後端需要傳回如下圖格式的 json 資料：

其中，count（本次傳回資料的條數）、all_count（符合條件的資料總計）、rows（内容，數組方式）為必選項。數組記憶體什麼當然沒有限制，并且童鞋們也可以在任何時候更改這些參數的名稱，隻要格式比對上就好啦。

PS：文中兩個基本函數用對象字面量方式封裝，這一點與之前無異。如果有童鞋不明白對象字面量的，就去在園子裡逛一逛吧~

聲明：未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接配接，否則視為侵權。

本文原創發表于部落格園，作者為暮城傾心。歡迎轉載。Donation(掃碼支援作者)↓

微信

支付寶