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

一、引入layUI的相關資源

<link rel="stylesheet" href="${ctxPath}/vendor/layui/css/layui.css" ><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: 前臺分頁插件傳入的每頁個數，