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">
' +
                                    '    <div class="layui-row">
' +
                                    '        <input type="hidden" name="id" class="id" value="' + item.ID + '"/>
' +
                                    '        <input type="hidden" name="type" class="type" value="' + item.type + '"/>
' +
                                    '        <input type="hidden" name="name" class="name" value="' + item.name + '"/>
' +
                                    '        <input type="hidden" name="states" class="states" value="' + item.states + '"/>
' +
                                    '        <div class="layui-col-xs8" style="padding-left: 50px;padding-top: 10px;">
' +
                                    '            <div ><span name="ziti">' + item.TITLE + '</span></div>
' +
                                    '            <div class="one" style=" padding-top: 8px;"><span name="ziti" style="font-size:12px">' + item.ZDRQ + '</span></div>
' +
                                    '        </div>
' +
                                    '        <div class="layui-col-xs1">
' +
                                    '        </div>
' +
                                    '        <div class="layui-col-xs3" style="padding-left: 50px;padding-top: 10px;">
' +
                                    '            <div><span name="ziti">' + item.CDATE + '</span></div>
' +
                                    '            <div><span name="ziti">' + item.TJR + '</span></div>
' +
                                    '        </div>
' +
                                    '    </div>
' +
                                    '    <div style=" padding-top: 15px;"><hr/></div>
' +
                                    '</div>';
                                arr.push(str);
                            } else {
                                var str = '<div class="xiaoxi">
' +
                                    '    <div class="layui-row">
' +
                                    '        <input type="hidden" name="id" class="id" value="' + item.ID + '"/>
' +
                                    '        <input type="hidden" name="type" class="type" value="' + item.type + '"/>
' +
                                    '        <input type="hidden" name="name" class="name" value="' + item.name + '"/>
' +
                                    '        <input type="hidden" name="states" class="states" value="' + item.states + '"/>
' +
                                    '        <div class="layui-col-xs8" style="padding-left: 50px;padding-top: 10px;">
' +
                                    '            <div ><span name="ziti" style="color:red">' + item.TITLE + '</span></div>
' +
                                    '            <div class="one" style=" padding-top: 8px;"><span name="ziti" style="font-size:12px;color:red " >' + item.ZDRQ + '</span></div>
' +
                                    '        </div>
' +
                                    '        <div class="layui-col-xs1">
' +
                                    '        </div>
' +
                                    '        <div class="layui-col-xs3" style="padding-left: 50px;padding-top: 10px;">
' +
                                    '            <div><span name="ziti" style="color:red">' + item.CDATE + '</span></div>
' +
                                    '            <div><span name="ziti" style="color:red">' + item.TJR + '</span></div>
' +
                                    '        </div>
' +
                                    '    </div>
' +
                                    '    <div style=" padding-top: 15px;"><hr/></div>
' +
                                    '</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);
    }
});