layui的分頁使用（前端分頁）
阿新 • • 發佈：2018-03-15
app value ner str sda msg urn mes function
<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);
}
});
layui的分頁使用（前端分頁）