layui实现数据表格实现数据表格table分页功能（分页功能（ajax异步）异步）
主要为大家详细介绍了layui实现数据表格table分页功能、异步加载，表格渲染，含条件查询，具有一定的参考价值，感兴
趣的小伙伴们可以参考一下
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: 前台分页插件传入的每页个数，
projectInfo ：接收前台传入的查询条件的实体
评论0