jsp页面加入以下代码,table用于表单渲染,page用于分页控件渲染
<table class="layui-table" id="list">
</table>
<div id="page">
js代码:
$(document).ready(function(){
tosubmit();
//点击搜索时 搜索数据
$("#selectButton").click(function(){
pageIndex = 1; //当点击搜索的时候,应该回到第一页
tosubmit();
toPage();//然后进行分页的初始化
})
toPage();
});
//分页参数设置 这些全局变量关系到分页的功能
var pageIndex = 1;
var pageSize = 15;
var currentPageIndex = 1;
var recordCount = 0;
function tosubmit(){
var key = $("#key").val();
var value = $("#value").val();
if($('#searchForm').form('validate')){
$.ajax({
cache : true,
type : "POST",
url : "${ctx}/rbac/dept/search",
data : {key:key,value:value,pageIndex:pageIndex,pageSize:pageSize},
async : false,
success : function(data) {
pageIndex = data.pageIndex;
recordCount = data.recordCount;
if (data.records != null) {
getListInfo(data.records);
}
}
});
}
}
function getListInfo(data){
var s = "<thead><tr><th width='30%'>部门名称</th><th width='30%'>上级部门</th><th width='30%'>部门描述</th><th width='10%'>选项</th></tr></thead>";
$.each(data,function(v,o){
s+='<tr><td>'+o.name+'</td>';
s+='<tr><td>'+o.pname+'</td>';
s+='<td>'+o.description+'</td>';
s+='<td><a class="layui-btn layui-btn-xs" onclick="toEdit('+o.id+')">编辑</a>';
s+='<a class="layui-btn layui-btn-danger layui-btn-xs" onclick="toDelete('+o.id+')">删除</a></td>';
s+='</tr>';
});
if(data.length>0){
$("#page").show();
$("#list").html(s);
}else{
$("#page").hide();
$("#list").html("<br/><span style='width:10%;height:30px;display:block;margin:0 auto;'>暂无数据</span>");
}
}
function toPage() {
layui.use(['laypage', 'layer'], function(){
var laypage = layui.laypage
,layer = layui.layer;
//总页数大于页码总数
laypage.render({
elem: 'page'
,layout: ['count', 'prev', 'page', 'next' , 'skip']
,count: recordCount //数据总数
,limit:15
,limits:[15]
,jump: function(obj,first){
console.log(obj);
pageIndex = obj.curr;
if(!first){ //一定要加此判断,否则初始时会无限刷新
tosubmit();//一定要把翻页的ajax请求放到这里,不然会请求两次。
}
}
});
})
}