是时候升级你的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：文中两个基本函数用对象字面量方式封装，这一点与之前无异。如果有童鞋不明白对象字面量的，就去在园子里逛一逛吧~

巴特西

是时候升级你的Js工具了-分页【基于JQ】

最新文章

热门文章