Layui 分页，不查全部数据

本人初学layui，大概也就三天不到吧
Layui 的 table 能支持自动分页，只要把查询返回的字段在渲染的时候放到对应的field就行了

效果如下

上边是其他同事写的代码跟页面，然后，感觉挺方便的，照着弄了个类似的，结果，就炸了。。。等了三十多秒才显示出来。
然后看了下后台代码，这居然。。。是全表查询。。。意思就是这个分页实际上算是个假分页，点击下一页也不是重新再查下一页的信息出来，因为他喵的第一次就已经把所有的都加载查出来了。。。我勒个去，难怪炸了，原来直接帮我查了1700多页的数据（被修改后找不到以前的图了）

然后问同事，他说可以用laypage来实行分页。然后我看文档，一遍跟着做
不得不说layui的文档写的很一般，很多说明就一句带过。。。用起来也很恶心，尤其是获取绑定事件id之类的
最后，在各种百度跟测试下，弄除了table+laypage的分页
其实这两个已经算是两个独立的模块了，代码如下

和上边不同的是，需要把page: true去掉，同时，在table加载完后执行done对laypage进行渲染，图片中queryTaskReport()方法是执行我的自定查询数据库方法，传当前页面curr以及每页显示数量limit到后台，同时需要对是否第一次点击进行判断，否则就无限循环的执行queryTaskReport()刷新。其中元素，counts,故名思意，总数，在返回的数据被我取出来手动放到这里，curr，当前页面，需要跟下边的hash联合使用，否则你无论怎么点都是显示为第一页，至于为什么替换（’#!true=’）,因为我在摸索的是否发现hash的值就是hash#!true=2（页数）的形式，至于原理就先不摸索，把需求搞定再说，嘿嘿嘿

最后是执行结果

由于公司代码，只能贴出相对应的部分前端代码，望见谅

function getDataList(departId, userIds, time ,currentPage, pageSize){
        $('#content').html("");
        $.ajax({
            url: '/remoteServlet',
            async: true,
            data: {
                obj: 'taskReportServer',
                method: 'getTaskReport',
                count: 5,
                param1: departId,
                param2: userIds,
                param3: time,
                param4: currentPage,
                param5: pageSize
            },
            type: 'post',
            success: function (data) {

                console.log(data);
                var data = eval('(' + data + ')');
                layui.use('table', function() {
                    var table = layui.table;
                    var laypage = layui.laypage;
                    var date1 = [];
                    var counts = 0;
                    var page = 0;
                    if(data.resultData.length>0) {
                        date1 = data.resultData;
                        counts = data.count;
                        page = data.page;
                    }


                    table.render({
                        elem: '#alltasker',
                        height: '460',
                        data: date1,
                        skin: 'skin',
                        even: 'true',
                        cols: [[
                            {field: 'SU01', title: '<span title="姓名">姓名</span>',align:"center",unresize:true, width:"80", fixed:"left", style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD1', title: '<span title="1号">1号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD2', title: '<span title="2号">2号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD3', title: '<span title="3号">3号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD4', title: '<span title="4号">4号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD5', title: '<span title="5号">5号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD6', title: '<span title="6号">6号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD7', title: '<span title="7号">7号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD8', title: '<span title="8号">8号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD9', title: '<span title="9号">9号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD10', title: '<span title="10号">10号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD11', title: '<span title="11号">11号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD12', title: '<span title="12号">12号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD13', title: '<span title="13号">13号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD14', title: '<span title="14号">14号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD15', title: '<span title="15号">15号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD16', title: '<span title="16号">16号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD17', title: '<span title="17号">17号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD18', title: '<span title="18号">18号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD19', title: '<span title="19号">19号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD20', title: '<span title="20号">20号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD21', title: '<span title="21号">21号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD22', title: '<span title="22号">22号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD23', title: '<span title="23号">23号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD24', title: '<span title="24号">24号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD25', title: '<span title="25号">25号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD26', title: '<span title="26号">26号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD27', title: '<span title="27号">27号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD28', title: '<span title="28号">28号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD29', title: '<span title="29号">29号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD30', title: '<span title="30号">30号</span>',align:"center",unresize:true, width:"180",style:"cursor: pointer",event: 'setSign'}
                            , {field: 'DD31', title: '<span title="31号">31号</span>',align:"center",unresize:true, width: "180",style:"cursor: pointer",event: 'setSign'}
                        ]],
                        done: function(res, curr, count){
                            $(".layui-table-main  tr").each(function (index ,val) {
                                $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                            });
                            laypage.render({
                                elem: 'laypage',
                                count: counts,
                                limit: 10,
                                first: "首页",
                                last: "尾页",
                                layout: ['count', 'prev', 'page', 'next',  'refresh', 'skip'],
                                curr: location.hash.replace('#!true=', ''),
                                hash: true,
                                jump: function(obj, first){
                                    page1 = obj.curr;
                                    if(!first){
                                        queryTaskReport(obj.curr, obj.limit);

                                    }

                                }
                            });

                        }
                    });


                });
            },
            error: function (data) {
                console.log("查询错误!");
                if(data.msg != null || data.msg != "")
                    alert(data.msg);
            }
        });
    }

    function queryTaskReport(currentPage, pageSize) {
        if(currentPage == "")
            currentPage = 1;
        if(pageSize == "")
            pageSize == 10;
        var departId = $("[name='FN05']").val();
        var time = $('#time').val();
        var userCode = $('#userCode').val();
        getDataList(departId, userCode, time, currentPage, pageSize);
    }