官方文档：
https://www.layui.com/doc/modules/table.html
效果图：
页面：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>设备列表</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md12">
<div class="layui-card">
<div class="layui-card-header">
<div class="layui-row">
<div class="layui-col-md4">
<button class="layui-btn"><i class="layui-icon"></i>新增</button>
</div>
<div class="layui-col-md4 layui-col-md-offset4">
<di class="layui-layout-right">
<div class="layui-input-inline">
<input type="text" id="codeLike" name="codeLike" placeholder="设备编号" autocomplete="off" class="layui-input">
</div>
<button class="layui-btn" onclick="search()">搜索</button>
</di>
</div>
</div>
</div>
<div class="layui-card-body">
<#--table容器-->
<table class="layui-hide" id="tableData"></table>
<#--绑定列工具条-->
<div class="layui-hide" id="tools">
<button class="layui-btn layui-btn-sm">编辑</button>
<button class="layui-btn layui-btn-sm layui-btn-danger">删除</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="/lib/jquery/jquery.min.js"></script>
<script src="/layuiadmin/layui/layui.js"></script>
<script src="/js/admin/machine/machineList.js"></script>
</body>
</html>js：
$(function () {
search();
});
function search() {
layui.use('table', function(){
var table = layui.table;
var codeLike=$('#codeLike').val();//模糊查询条件
//展示已知数据
table.render({
elem: '#tableData' //指定table容器
,url: '/machine/list.dd' //数据接口
,method:'post'
,where:{codeLike:codeLike} //额外参数
,even: true //开启隔行背景
,cols: [[ //表头
{field: 'code', title: '编号'}
,{field: 'typeId', title: '类型'}
,{field: 'businessId', title: '商圈'}
,{field: 'userId', title: '加盟商'}
,{field: 'startTime', title: '服务开始时间'}
,{field: 'endTime', title: '服务结束时间'}
,{field: 'status', title: '状态'}
,{title: '操作',toolbar: '#tools'}
]]
,page:{
layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局
,groups: 6 //只显示 1 个连续页码
}
});
});
}
controller：
/**
* 查询设备列表
* @return
*/
@PostMapping("/list.dd")
@ResponseBody
public LayuiReplay<Map<String, Object>> list(@RequestParam(defaultValue = "") String codeLike,
@RequestParam(defaultValue = "1") Integer page,
@RequestParam(defaultValue = "10") Integer limit){
Map map=new HashMap();
map.put("codeLike","%"+codeLike+"%");//查询条件 code
PageHelper.startPage(page, limit,"code");//后端使用PageHelper分页 code为排序字段
Page<Map<String, Object>> machineList = machineService.list(map);
return new LayuiReplay<Map<String, Object>>(0, "OK", Integer.parseInt(machineList.getTotal()+""), machineList);
}传值给layui的工具类：
package com.iqj.project.common.utils;
import com.google.gson.Gson;
import java.util.List;
/**
* @author 17
* @date 2018/11/27 16:45
* @describe
*/
public class LayuiReplay<T> {
private int code;
private String msg;
private int count;
private List<T> data;
public LayuiReplay(int code, String msg, int count, List<T> data) {
this.code = code;
this.msg = msg;
this.count = count;
this.data = data;
}
public String toJson() {
Gson gson = new Gson();
String json = gson.toJson(this);
return json;
}
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getMsg() {
return msg;
}
public void setMsg(String msg) {
this.msg = msg;
}
public int getCount() {
return count;
}
public void setCount(int count) {
this.count = count;
}
public List<T> getData() {
return data;
}
public void setData(List<T> data) {
this.data = data;
}
}
注意看文档，这三个参数之间的传递是实现分页的关键：
