1.下载layui
https://www.layui.com/(layui前端框架由贤心创作)
2.查看文档
https://www.layui.com/doc/modules/laypage.html(分页)
3.实例展示
//核心配置
layui.config({
base : "js/"
}).use(['form','layer','jquery','laypage'],function(){
var form = layui.form(),
layer = parent.layer === undefined ? layui.layer : parent.layer,
laypage = layui.laypage,
$ = layui.jquery;
//加载页面数据
var noticeData = '';
$.ajax({
url:'/notice/select',
type:'post',
dataType:'json',
contenType : 'application/json',
error: function(data){
alert("失败!");
},
success: function(data){
noticeData=data;
noticeList();
}
});
function noticeList(that){
//渲染数据
function renderDate(data,curr){
var dataHtml = '';
if(!that){
currData = noticeData.concat().splice(curr*nums-nums, nums);
}else{
currData = that.concat().splice(curr*nums-nums, nums);
}
if(currData.length != 0){
for(var i=0;i<currData.length;i++){
dataHtml +='<tr>';
dataHtml +='<td>'+currData[i].notice_id+'</td>';
dataHtml +='<td>'+currData[i].title+'</td>';
dataHtml +='<td>'+currData[i].user_id+'</td>';
dataHtml +='<td>'+timeStamp2String(currData[i].turnover_time)+'</td>';
dataHtml +='<td>'+currData[i].clicks+'</td>';
dataHtml +='<td>'+currData[i].classify+'</td>';
dataHtml +='<td>'+currData[i].prospectus+'</td>';
dataHtml +='<td>'+currData[i].photo+'</td>';
dataHtml +='<td>'+'<a href="noticeEdit.html?notice_id='+currData[i].notice_id+'"><button type="button"><i class="iconfont icon-edit"></i>编辑</button></a>'
+'<button type="button" onclick="deletey5555('+currData[i].notice_id+')" style="background-color:yellow;">删除<i class="layui-icon"></i></button>'+'</td>';
dataHtml +='</tr>';
}
}
return dataHtml;
}
//分页
var nums = 2; //每页出现的数据量
if(that){
noticeData = that;
}
laypage({
cont : "page",
pages : Math.ceil(noticeData.length/nums),
jump : function(obj){
$(".thead").html(renderDate(noticeData,obj.curr));
$('.notice_list thead input[type="checkbox"]').prop("checked",false);
form.render();
}
})
}
分页效果图
4.layui分页使用总结
通过核心参数laypage.render(options)来设置分页参数