一, 前端 js 页面
layui.use(['laypage', 'layer', 'table', 'element'], function() {
var laypage = layui.layPage,
layer = layui.layer,
table = layui.table,
element = layui.element
table.render({
elem: '#table',
height: 470,
even: true,
limit: 10, //每页默认显示的数量
limits: [10, 15, 20],
//url: 'new_file1.json', //数据接口
url: '/listCustomer',
page: true, //开启分页
toolbar: 'default', //开启头部工具栏
cols: [
[ //表头
{
type: 'checkbox',
fixed: 'left'
}, {
field: 'customerid',
title: 'customerid',
width: 135,
fixed: 'left'
}, {
field: 'customercode',
title: 'customercode',
width: 135
}
]
]
});
二, 后端controller页面
@Controller
public class CustomerController {
@Autowired
CustomerService customerService;
/**
* layui接受的数据格式如下:
* response: { //定义后端 json 格式,详细参见官方文档
* code: 0,
* msg: "",
* count: 1000,
* data: []
* }
* @return
*/
@RequestMapping("/listCustomer")
@ResponseBody//必须
public String getCustomer() {
List<Customer> cstList = customerService.selectCustomerList();
JSON.toJSONString(cstList);
//前台通过key值获得对应的value值
JSONObject jobj = new JSONObject();
//数据状态的字段名称,默认:code
jobj.put("code",0);
//成功的状态码,默认:0
jobj.put("msg", "");
jobj.put("count",1000);
jobj.put("data",cstList);
//注意需将JSON码转为字符串格式,应使用assoc:false参数转为对象而非数组
return jobj.toJSONString();
}
三,