目录

layui-前端分页-后端分页

layui 前端分页 后端分页

1,前端分页

效果图:

https://i-blog.csdnimg.cn/blog_migrate/5f033e6c3abd3798b0f825c1bfe67fac.png#pic_center

代码:
layui.use('table', function(){
var table = layui.table;
//第一个实例
table.render({
elem: '#demo'
,height: 312
,url: '/demo/table/user/' //数据接口
,page: true //开启分页
,limit:2000 // 当前页数
,limits: [1,15, 30, 50,100,200,500,5000,10000,20000,50000] // 页数容量
,cols: [[ //表头
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'username', title: '用户名', width:80}
,{field: 'sex', title: '性别', width:80, sort: true}
,{field: 'city', title: '城市', width:80}
,{field: 'sign', title: '签名', width: 177}
,{field: 'experience', title: '积分', width: 80, sort: true}
,{field: 'score', title: '评分', width: 80, sort: true}
,{field: 'classify', title: '职业', width: 80}
,{field: 'wealth', title: '财富', width: 135, sort: true}
]]
});
});

2,后端分页

效果图:

https://i-blog.csdnimg.cn/blog_migrate/5a8c7d6c61b2f10fcea560550435d879.png#pic_center

代码:

前端代码: javascript 查询功能:

function searchBtn(pageNumberg,pageSizeg) {
hsdata(pageNumberg,pageSizeg);
}
function hsdata(pageNumberg,pageSizeg) {
var fieldValues = {};
fieldValues.currentPage=pageNumberg?pageNumberg:1;
fieldValues.pageSize=pageSizeg?pageSizeg:15;
fieldValues.searchBtn='searchBtn';
----------------------------------------------------
$.ajax({
type: 'post',
async: false,
data: fieldValues,// 参数
url: "",
dataType: 'JSON',
success: function (dataremote) {
hstable(dataremote) // 响应回来的数据
}
});
----------------------------------------------------或者
dLong.getJSON("",fieldValues,function(data){
if (data.success) {
hstable(data)
}else {
hstable([],true)
}
},true);
}

数据表格:

function hstable(data) {
var table = layui.table;
pages=data?data.commonPage.pageSize:15
var ins1=table.render({
elem: '#hstable',
height: "full-110",
// width: 7* CLIENTWIDTH / 10,
size: 'sm' ,
filter:{
bottom:false
},
page:false,// 关闭layui数据表格自带的分页样式
limit:data?data.commonPage.pageSize:15,
limits:[15,30,60,80,160,300,600,1000,2000,5000,10000,20000,50000],
where: {
"checkType":1,//自定义参数
"page":data?data.commonPage.pageIndex:1,//当前页(必传参数,可改变参数名)
"size":data?data.commonPage.pageSize:20,//每页条数(必传参数,可改变参数名)
},
cols: [[]],
data: data? data.commonPage.resultlist : [],
// data: data? data : [],
done: function (res, curr, count) {
layui.soulTable.render(this)
doneCallback(data) // 回调函数
}
});
}

回调函数:

// 分页回调函数,自定义分页渲染
function doneCallback(data){
layui.laypage.render({
elem: 'pageid', //注意,这里的 test1 是 ID,不用加 # 号
count: data?data.commonPage.result.total:0, //数据总数,从服务端得到,
limit:data?data.commonPage.pageSize:15,
curr:data?data.commonPage.pageIndex:1,
limits:[15,30,60,80,160,300,600,1000,2000,5000,10000,20000,50000],
layout: ['prev', 'page','count', 'next', 'limit', 'skip'],// 自定义排版
page: { //支持传入 laypage 组件的所有参数(某些参数除外,如:jump/elem) - 详见文档
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
//,curr: 5 //设定初始在第 5 页
,groups: 6 // 连续出现的页码个数
},
skip: true, //是否开启跳页
theme:"#009688", // 主题样式
jump:function (obj,first) {
if(!first){
searchBtn(obj.curr,obj.limit); // 传递参数
}
}
});
}

后端代码:

@RequestMapping("/getItemList")
@ResponseBody
public HashMap getItemList(@RequestParam Map paraMap){
try {
String sql="";
HashMap stringObjectHashMap = new HashMap<>();
if(!StringUtil.isEmptyOrLength0(paraMap.get("search"))){
sql=" select * from table1 WHERE (ITEMNAME like :search or ITEMCODE like :search) and itemcode not in (select itemcode from table2 where rulecode=:rulecode) ";
stringObjectHashMap.put("search","%"+paraMap.get("search")+"%");
}else {
sql=" select * from table1 where itemcode not in (select itemcode from table2 where rulecode=:rulecode)";
}
stringObjectHashMap.put("rulecode",paraMap.get("rulecode"));
stringObjectHashMap.put(PageUtil.ORDER_BY, "ITEMNAME@desc,ITEMCODE@desc");
stringObjectHashMap.put(PageUtil.PAGE_INDEX, StringUtil.isEmptyOrLength0(paraMap.get("currentPage")) ? 1L : Integer.parseInt(paraMap.get("currentPage")));
stringObjectHashMap.put(PageUtil.PAGE_SIZE, StringUtil.isEmptyOrLength0(paraMap.get("pageSize")) ? 15L : Integer.parseInt(paraMap.get("pageSize")));
CommonPage commonPage =
PageUtil.newPageUtil(stringObjectHashMap, sql, "").execSearch(new NamedParameterJdbcTemplate(jdbcTemplate.getDataSource()));
HashMap result = createResult(true, "");
result.put("commonPage",commonPage);
return result;
} catch (Exception e) {
log.error("系统错误!"+e.getMessage(),e);
return createResult(Boolean.FALSE,"操作失败。");
}
}