layui列表查詢及分頁
阿新 • • 發佈:2018-12-06
官方文件:
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;
}
}