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: 前臺分頁插件傳入的每頁個數,
新聞熱點
疑難解答
圖片精選