layui實現數據表格table分頁功能（ajax異步）

2024-09-01 08:34:01

字體：大中小

來源：轉載

供稿：網友

layui實現數據表格table分頁功能，異步加載，表格渲染，含條件查詢。

一、引入layUI的相關資源

<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" rel="external nofollow" ><script src="${ctxPath}/vender/layui/layui.js" charset="utf-8"></script>

二、html頁面代碼

搜索表單：

<div class="layui-row"> <form class="layui-form layui-col-md12 we-search"> 項目搜索： <div class="layui-inline">  <input type="text" name="projectName" id="projectName" placeholder="項目名稱" autocomplete="off" class="layui-input"> </div> <div class="layui-input-inline">  <select name="businessOperatorId" id="businessOperatorId" lay-verify="" lay-search>  <option value="">業務員</option>  </select> </div> <div class="layui-input-inline">  <select name="mftRepresentativeId" id="mftRepresentativeId" lay-verify="" lay-search>  <option value="">廠家代表</option>  </select> </div> <div class="layui-input-inline">  <select name="channelId" id="channelId" lay-search>  <option value="">渠道</option>  </select> </div>    <div class="layui-input-inline">      <select name="customerId" id="customerId" lay-search>        <option value="">客戶</option>      </select>    </div>    <div class="layui-input-inline">      <select name="projectPhase" id="projectPhase" lay-search>        <option value="">項目階段</option>      </select>    </div>    <div class="layui-input-inline">      <select name="goodsCondition" id="goodsCondition" lay-search>        <option value="">貨物情況</option>      </select>    </div>    <div class="layui-input-inline">      <select name="implementCondition" id="implementCondition" lay-search>        <option value="">實施情況</option>      </select>    </div>    <div class="layui-input-inline">      <select name="payCondition" id="payCondition" lay-search>        <option value="">收款情況</option>      </select>    </div> <div class="layui-inline">  <input class="layui-input" placeholder="開項時間" name="startTime" id="startTime"> </div> <div class="layui-inline">  <input class="layui-input" placeholder="結項時間" name="endTime" id="endTime"> </div> <button class="layui-btn" lay-submit="" lay-filter="sreach"><i class="layui-icon"></i></button> </form></div>

數據表格:

<table class="layui-hide" id="projectList" lay-filter="projectList"></table>

三、后臺接收分頁參數以及查詢條件，獲取并返回數據

主要注意下:

page: 前臺分頁插件傳入的當前頁數，
limit: 前臺分頁插件傳入的每頁個數，
projectInfo ：接收前臺傳入的查詢條件的實體
jsonResult ：后臺返回的相關數據的響應實體

@ResponseBody  @RequestMapping("/project/list")  public JsonResult list(@RequestParam("page") Integer page, @RequestParam("limit") Integer size, ProjectInfoEntity projectInfo){    JsonResult jsonResult = projectService.getProjectList(page,size,projectInfo);    return jsonResult;  }

后臺響應類必須包含code與count字段，因為前臺layui會自動獲取

自定義后臺數據響應實體 JsonResult：

package com.bhy702.jfkj.common.util;/** * JSON結果響應 * */@Datapublic class JsonResult {  private static final String SUCCESS = "成功";  private static final String ERROR = "失敗";    /**   * 響應狀態code，因為前臺layui默認0為響應成功，所以此處默認為0   */  private Integer code = 0;  /**   * 數據總條數   */  private Long count = 0L; /**   * 返回是否成功   */  private Boolean result = false;    /**   * 返回提示信息   */  private String msg = "";  /**   * 返回數據信息   */  private Object data;  private JsonResult() {  }  /**   * 成功的響應   *    * @return   */  public static JsonResult success() {    return result(true, SUCCESS, null,null);  }  public static JsonResult success(String msg) {    return result(true, msg, null,null);  }  public static JsonResult success(Object data) {    return result(true, SUCCESS, data,null);  }  public static JsonResult success(Object data,Long count) {    return result(true, SUCCESS, data,count);  }  public static JsonResult success(String msg, Object data) {    return result(true, msg, data,null);  }  public static JsonResult success(String msg, Object data,Long count) {    return result(true, msg, data,count);  }  /**   * 失敗的響應   *    * @return   */  public static JsonResult error() {    return result(false, ERROR, null,null);  }  public static JsonResult error(String msg) {    return result(false, msg, null,null);  }  public static JsonResult error(Object data) {    return result(false, ERROR, data,null);  }  public static JsonResult error(Object data,Long count) {    return result(false, ERROR, data,count);  }  public static JsonResult error(String msg, Object data) {    return result(false, msg, data,null);  }  public static JsonResult error(String msg, Object data,Long count) {    return result(false, msg, data,count);  }  public static JsonResult result(Boolean result, String msg, Object data,Long count) {    JsonResult jsonResult = new JsonResult();    jsonResult.setResult(result);    jsonResult.setMsg(msg);    jsonResult.setData(data);    jsonResult.setCount(count);    return jsonResult;  }}

四、渲染table表格數據

主要注意下:

elem: ‘#projectList': projectList為表格id，
page: true: 設置表格分頁，
url: ‘/project/list' ：數據請求url
fixed: true:固定列
done : function(res, curr, count){…}:數據加載成功后的回調函數

var tableIns = table.render({ elem: '#projectList', cellMinWidth: 150, url: '/project/list', cols: [  [{  // type: 'checkbox',fixed: 'left'        checkbox: true, fixed: true  }, {  field: 'id',title: 'ID',align:'center',width:50,fixed: true  }, {  field: 'name',title: '項目名稱',align:'center',fixed: true  }, {  field: 'businessOperatorStr',title: '經辦人',align:'center',fixed: true  }, {  field: 'mftRepresentativeStr',title: '廠家代表',align:'center',fixed: true  }, {  field: 'channelStr',title: '渠道',align:'center',fixed: true  }, {  field: 'customerStr',title: '客戶',align:'center',fixed: true  }, {        field: 'projectPhaseStr',title: '項目階段',align:'center',fixed: true  }, {  field: 'amount',title: '金額',align:'center'  }, {  field: 'businessSource',title: '商機來源',align:'center'  }, {   field: 'mainProduct',title: '主要產品',align:'center'  }, {   field: 'productLineStr',title: '產品線',align:'center'  }, {   field: 'goodsConditionStr',title: '貨物情況',align:'center'  }, {   field: 'implementConditionStr',title: '實施情況',align:'center'  }, {        field: 'payAmount',title: '已付金額',align:'center'      }, {   field: 'payConditionStr',title: '收款情況',align:'center'  }, {   field: 'startTime',title: '開項時間',align:'center'      }, {   field: 'endTime',title: '結項時間',align:'center'      }, {   field: 'remark',title: '備注',align:'center'  }, {   field: 'operate',title: '操作',toolbar: '#operateTpl',fixed: 'right',unresize: true  }] ], id: 'testReload', // skin: 'row', //表格風格 even: true, //隔行背景 event: true, page: true,    done : function(res, curr, count){      $('#totalProjectNumber').text("共有數據："+count+" 條");      table_data=res.data;      layer.closeAll('loading');      // layer.close(layer.index); //它獲取的始終是最新彈出的某個層，值是由layer內部動態遞增計算的      // layer.close(index);  //返回數據關閉loading    } });

五、監聽搜索表單的提交事件,并重新渲染table表格數據

主要注意下:

sreach: 為搜索按鈕的lay-filter=“sreach”，
where 中的數據對應搜索表單，為搜索的條件，后臺使用這些條件進行篩選數據返回

form.on('submit(sreach)', function(data){   layer.load();    tableIns.reload({  url:"/project/list",  page: {        curr: 1 //重新從第 1 頁開始      },  where:{  name:data.field.projectName,        businessOperatorId:data.field.businessOperatorId,  mftRepresentativeId:data.field.mftRepresentativeId,  channelId:data.field.channelId,        customerId:data.field.customerId,        projectPhase:data.field.projectPhase,        goodsCondition:data.field.goodsCondition,        implementCondition:data.field.implementCondition,        payCondition:data.field.payCondition,        startTime:data.field.startTime,        endTime:data.field.endTime  }    });    return false; //阻止表單跳轉。如果需要表單跳轉，去掉這段即可。  });

六、效果展示

layui,數據表格,table,分頁,ajax