layui的分页使用（前端分页）

<div id="one"></div>//显示数据库中数据的<ul id="ones"></ul>//显示分页的

=============================

$.ajax({    url: "/sysMessage/messjson",    //data: {page:currentPage, limit:limit},    dataType: "json",    type: "post",    //contentType : ‘application/json;charset=UTF-8‘,    async: false,    success: function (res) {        if (res.errcode === "0") {            var data =res.data;

//调用分页            laypage.render({                elem: ‘ones‘                ,count: res.data.length                ,limit:20                ,jump: function(obj){                    //模拟渲染                    document.getElementById(‘one‘).innerHTML = function(){                        var arr = []                            ,thisData =data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);                        layui.each(thisData, function(index, item){                            if (item.colors === ‘0‘) {//是否已读0已读1未读（通过颜色不一样，去区数据是否是已读未读）                                var str = ‘<div class="xiaoxi">\n‘ +                                    ‘    <div class="layui-row">\n‘ +                                    ‘        <input type="hidden" name="id" class="id" value="‘ + item.ID + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="type" class="type" value="‘ + item.type + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="name" class="name" value="‘ + item.name + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="states" class="states" value="‘ + item.states + ‘"/>\n‘ +                                    ‘        <div class="layui-col-xs8" style="padding-left: 50px;padding-top: 10px;">\n‘ +                                    ‘            <div ><span name="ziti">‘ + item.TITLE + ‘</span></div>\n‘ +                                    ‘            <div class="one" style=" padding-top: 8px;"><span name="ziti" style="font-size:12px">‘ + item.ZDRQ + ‘</span></div>\n‘ +                                    ‘        </div>\n‘ +                                    ‘        <div class="layui-col-xs1">\n‘ +                                    ‘        </div>\n‘ +                                    ‘        <div class="layui-col-xs3" style="padding-left: 50px;padding-top: 10px;">\n‘ +                                    ‘            <div><span name="ziti">‘ + item.CDATE + ‘</span></div>\n‘ +                                    ‘            <div><span name="ziti">‘ + item.TJR + ‘</span></div>\n‘ +                                    ‘        </div>\n‘ +                                    ‘    </div>\n‘ +                                    ‘    <div style=" padding-top: 15px;"><hr/></div>\n‘ +                                    ‘</div>‘;                                arr.push(str);                            } else {                                var str = ‘<div class="xiaoxi">\n‘ +                                    ‘    <div class="layui-row">\n‘ +                                    ‘        <input type="hidden" name="id" class="id" value="‘ + item.ID + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="type" class="type" value="‘ + item.type + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="name" class="name" value="‘ + item.name + ‘"/>\n‘ +                                    ‘        <input type="hidden" name="states" class="states" value="‘ + item.states + ‘"/>\n‘ +                                    ‘        <div class="layui-col-xs8" style="padding-left: 50px;padding-top: 10px;">\n‘ +                                    ‘            <div ><span name="ziti" style="color:red">‘ + item.TITLE + ‘</span></div>\n‘ +                                    ‘            <div class="one" style=" padding-top: 8px;"><span name="ziti" style="font-size:12px;color:red " >‘ + item.ZDRQ + ‘</span></div>\n‘ +                                    ‘        </div>\n‘ +                                    ‘        <div class="layui-col-xs1">\n‘ +                                    ‘        </div>\n‘ +                                    ‘        <div class="layui-col-xs3" style="padding-left: 50px;padding-top: 10px;">\n‘ +                                    ‘            <div><span name="ziti" style="color:red">‘ + item.CDATE + ‘</span></div>\n‘ +                                    ‘            <div><span name="ziti" style="color:red">‘ + item.TJR + ‘</span></div>\n‘ +                                    ‘        </div>\n‘ +                                    ‘    </div>\n‘ +                                    ‘    <div style=" padding-top: 15px;"><hr/></div>\n‘ +                                    ‘</div>‘;                                arr.push(str);                            }                        });                        return arr.join(‘‘);                    }();                }            });        } else if (res.errcode === "1") {            layer.msg(res.errmsg, function () {            });        }    },    error: function (XMLHttpRequest, textStatus, errorThrown) {        console.error(XMLHttpRequest.status);        console.error(XMLHttpRequest.readyState);        console.error(textStatus);    }});

原文地址：https://www.cnblogs.com/songyinan/p/8573892.html