layui实现数据表格桌子分页功能(ajax异步)

获得实现数据表格桌子分页功能，异步加载，表格渲染，含条件查询。

一、引入获得的相关资源

链接rel='样式表href=' $ { ctxPath }/vendor/layui/CSS/layui。CSS ' script src=' http : $ { CTxpath }/vendor/layui/layui。js ' charset=' utf-8 '/脚本二、html页面代码

搜索表单：

div class=' layui-row ' form class=' layui-form layui-col-md12 we-search '项目搜索：div class='layui-inline '输入类型=' text ' name=' project name ' id=' project name '占位符='项目名称自动完成=' off ' class=' layui-input '/div class=' layui-input-inline ' select name=' business operator id ' id=' business operator id ' lay-verify=' lay-search选项值=' '业务员/option/select/div class=' layui-input-inline ' select name=' mftrepresentatiid ' id=' mftrepresentatiid ' lay-verify=' lay-搜索选项值=' '厂家代表/option/select/div class=' layui-input-inline ' select name=' channel id ' id=' channel id ' lay-search选项值=' '渠道/option/select/div class=' layui-input-inline ' select name=' customerId ' id=' customerId ' lay-搜索选项值=' '客户/option/select/div class=' layui-input-inline ' select name=' project phase ' id=' project phase ' lay-search选项值=' '项目阶段/option/select/div class=' layui-input-inline ' select name=' goodsCondition ' id=' goodsCondition '布局搜索选项值=' '货物情况/option/select/div div class=' layui-input-inline '选择名称='实现条件' id='实现条件' lay-search选项值='实施情况/option/select/div class=' layui-input-inline ' select name=' pay condition ' id=' pay condition ' lay-search option value=' '收款情况/option/select/div class=' layui-inline ' input class=' layui-input ' placeholder='开项时间name='开始时间' id='开始时间'/div div class=layui-inline ' input class=' layui-input ' placeholder='结项时间name=' end time ' id=' end time '/div button class=' layui-BTN ' lay-submit=' lay-filter=' sreach ' I class='layui-icon'/i/button/form/div数据表格：

table class=' layui-hide ' id='项目列表' lay-filter='项目列表'/table三、后台接收分页参数以及查询条件，获取并返回数据

主要注意下：

第：页前台分页插件传入的当前页数，limit:前台分页插件传入的每页个数，项目信息：接收前台传入的查询条件的实体jsonResult:后台返回的相关数据的响应实体

@响应正文@请求映射(“/project/list”)公共JsonResult列表(@ request param(' page ')整数页，@RequestParam('限制')整数大小，项目信息实体项目信息){ JsonResult JsonResult=项目服务。getproject列表(页，大小，项目信息)；返回jsonResult}后台响应类必须包含密码与数数字段，因为前台获得会自动获取

自定义后台数据响应实体JsonResult:

包裹。com。bhy 702。jfkj。常见。util/** * JSON结果响应* */@Datapublic类JsonResult {私有静态最终字符串SUCCESS='成功；私有静态最终字符串ERROR='失败；/** * 响应状态代码，因为前台获得默认0为响应成功，所以此处默认为0 */私有整数代码=0;/** * 数据总条数*/列兵龙计数=0L/** *返回是否成功*/私有布尔结果=false/** *返回提示信息*/私有字符串消息=' ';/** * 返回数据信息*/私有对象数据；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)；}公共静态JsonResult成功(对象数据){ 0返回结果(true，成功，数据，null)；} public static JsonResult success(Object data，Long count) { return result(true，SUCCESS，data，count)；}公共静态JsonResult成功(字符串消息，对象数据){ 0返回结果(true，msg，data，null)；}公共静态JsonResult成功(字符串消息，对象数据，长计数){ 0返回结果(true，msg，data，count)；} /** * 失败的响应* * @ return */public static JsonResult error(){ return result(false，ERROR，null，null)；}公共静态JsonResult错误(字符串消息){ 0返回结果(false、msg、null、null)；}公共静态JsonResult错误(对象数据){ 0返回结果(假、错误、数据、空)；}公共静态JsonResult错误(对象数据，龙计数){返回结果(错误、错误、数据、计数)；}公共静态JsonResult错误(字符串消息，对象数据){ 0返回结果(false，msg，data，null)；}公共静态JsonResult错误(字符串消息，对象数据，长计数){ 0返回结果(false，msg，data，count)；}公共静态JsonResult结果（布尔结果、字符串消息、对象数据、龙计数){ JsonResult JsonResult=new JsonResult()；jsonResult.setResult(结果);jsonresult。setmsg(msg)；jsonResult.setData(数据);jsonresult。setcount(计数)；返回jsonResult}}四、渲染桌子表格数据

主要注意下：

elem: ' #项目列表' :项目列表为表格id，第：页true:设置表格分页，网址： '/项目/列表：数据请求urlfixed: true:固定列完成：函数(res，curr，count){…}:数据加载成功后的回调函数

var tableIns=table。渲染({ elem : ' # 项目列表'，cellMinWidth: 150，URL : '/项目/列表'，cols :[{//type : ' checkbox '，fixed : ' left ' checkbox 3: true，fixed: true }，{ field: 'id '，title: 'ID '，align:'center '，width:50项目名称，align:'center '，fixed: true }，{ field : ' business operator str '，title: '经办人，align:'center '，fixed: true }，{ field : ' mftrepresentatinstr '，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: 主产品'，标题： '主要产品，对齐： '中心}，{ field: 'productLineStr '，title: '产品线，align:'center' }，{ field: 'goodsConditionStr '，title: '货物情况，align:'center' }，{ field: ' implementConditionStr '，title: '实施情况，align:'center' }，{ field: 'payAmount '，title: '已付金额，align:'center' }，{ field: 'payConditionStr '，title: '收款情况，对齐： '中心}，{ field: '开始时间，标题： '开项时间，align:'center' }，{ field: 'endTime '，title: '结项时间，对齐： '中心}，{ field: '备注，标题： '备注，align:'center' }，{ field: 'operate '，title: '操作，toolbar: ' # operateTpl '，fixed: 'right '，unresize: true }]，id: 'testReload '，//skin: 'row '，//表格风格even: true，//隔行背景事件：为真，页面：为真，完成：函数(res，curr，count){ $('#totalProjectNumber '). 文本('共有数据："计数"条');table _ data=res.datalayer。closeall(“加载”)；//图层。关闭(层。索引)；//它获取的始终是最新弹出的某个层，值是由层内部动态递增计算的//layer.close(索引);//返回数据关闭正在加载} });五、监听搜索表单的提交事件，并重新渲染桌子表格数据

主要注意下：

sreach:为搜索按钮的lay-filter="sreach "，其中中的数据对应搜索表单，为搜索的条件，后台使用这些条件进行筛选数据返回

form.on('submit(sreach)'，function(data){ layer。load()；表格。重新加载({ URL : '/项目/列表'，第：页{ curr: 1 //重新从第一页开始},其中： { name :数据。字段。项目名称，业务运营数据：字段。商业运营，mftrepresentatiid :数据。字段。mftrepresentatiid，channeld :数据。字段。信道化，customerid :数据。字段。customerid，项目阶段3360数据。字段。项目阶段，goodscondition 3360数据。字段。goodscondition，实现条件：数据。字段。返回false//阻止表单跳转。如果需要表单跳转，去掉这段即可。 });六、效果展示

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。