layui实现数据表格table分页功能（ajax异步）

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

<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="项目名称" aulete="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">&#xe615;</i></button>
 </form>
</div>

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

@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;
 }

package .bhy702.jfkj.mon.util;

/
  JSON结果响应
 
 /
@Data
public 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 suess() {
 return result(true, SUCCESS, null,null);
 }

 public static JsonResult suess(String msg) {
 return result(true, msg, null,null);
 }

 public static JsonResult suess(Object data) {
 return result(true, SUCCESS, data,null);
 }
 public static JsonResult suess(Object data,Long count) {
 return result(true, SUCCESS, data,count);
 }


 public static JsonResult suess(String msg, Object data) {
 return result(true, msg, data,null);
 }

 public static JsonResult suess(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;
 }
}

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
 }
 });

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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
 });