是时候升级你的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(扫码支持作者)↓

微信

支付宝