1，前端分页
效果图：
代码：
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，后端分页
效果图：
代码：
前端代码：
<div class="fp-table" style="width: 100%">
<table id="hstable" lay-filter="hstool"></table>
<div id="pageid" style="text-align: left;border:1px solid rgba(229, 229, 229, 1);border-top: none ;height: 41px"></div>
</div>
查询功能：
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) // 响应回来的数据
}
});
}
数据表格：
<style>
.soul-bottom-contion {
height: 31px;
/*line-height: 29px;*/
border-top: solid 1px #e6e6e6;
display:none;
}
.soul-bottom-contion .condition-items {
display: inline-block;
width: calc(100vw - 100px);
height: 30px;
float: left;
/*overflow: hidden;*/
white-space: nowrap;
display:none;
}
</style>
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.result.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.totalrecord: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<String, Object> getItemList(@RequestParam Map<String,String> paraMap){
try {
String sql="";
HashMap<String, Object> 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<String, Object> result = createResult(true, "");
result.put("commonPage",commonPage);
return result;
} catch (Exception e) {
log.error("系统错误！"+e.getMessage(),e);
return createResult(Boolean.FALSE,"操作失败。");
}
}