layui的数据表格（table）分页篇

首先，最简单的先渲染一个表格，参考官方示例：

这里先讲讲一些渲染细节：

layui内部就是根据cols属性里面每项的field字段来输出数据（该字段跟后台返回的数据字段一致即可输出）。

另外，layui拼接html字符串的方式多次应用数组join方法的方式，这种方式值得安利一波：

否则用传统方式拼接html字符串就相形见绌了（不推荐）：

接着，看一下分页：

从图中可以看出，我们请求地址没加请求参数，layui自动帮我们添加了page，limit的请求参数，默认值分别为1, 10，这是开启了分页的缘故(page: true)。那么，请求参数名是否可以定制呢？答案是可以的，参考request属性：

同样，响应参数名也是可以定制的，参考response属性：

注意，以上只是定制了参数名字而已，接下来才是重头戏：定制数据格式，参考parseData属性：

parseData可以帮助我们定制好与layui对应的表格数据格式，从而输出表格，这是很有用的，毕竟后端前辈返回的数据格式未必跟layui的一致呀。有了以上3种定制方式，我们就不惧输出数据表格了。采用这种方式输出的就是真正的实现了分页，下文提及的方式可不是真正的分页。

-----------------------快乐的分割线，前方jojo高能-----------------------

可能也有小伙伴无视了 request、response、parseData 三剑客，转而用起了data属性，过程如下：

拒绝了使用url属性请求，转用jquery ajax请求数据，最后再tableInsreload({ data: resdata })一波，达成666 *** 作。

这种做法从结果上看，似乎是可以的。。。。。。搭嘎，口头挖撸。

因为通过data属性赋值是不会分页去请求后端的，而是直接请求全部数据，然后layui内部进行前端分页处理，这样一来，如果数据量大的话，恐怕页面就要刷好一会儿了o(╥﹏╥)o。（只有通过data方式赋值才会进行前端分页处理，所以url方式可以放心食用）。

在table标签的上方，加入这样一组html

<div class="demoTable">

搜索商户： <div class="layui-inline">

<input class="layui-input" name="keyword" id="demoReload" autocomplete="off">

</div>

<button class="layui-btn" data-type="reload">搜索</button></div>

在js加入初始化代码和定义加载方法

layuiuse('table', function(){

var table = layuitable;

//方法级渲染

tablerender({

elem: '#LAY_table_user'

,url: 'UVServlet'

,cols: [[

{checkbox: true, fixed: true}

,{field:'id', title: 'ID', width:80, sort: true, fixed: true}

,{field:'aid', title: '商户', width:80, sort: true}

,{field:'uv', title: '访问量', width:80, sort: true,edit:true}

,{field:'date', title: '日期', width:180}

,{field:'datatype', title: '日期类型', width:100}

]]

,id: 'testReload'

,page: true

,height: 600

});

var $ = layui$, active = {

reload: function(){

var demoReload = $('#demoReload');

tablereload('testReload', {

where: {

keyword: demoReloadval()

}

});

}

};

)};

绑定click点击事件

$('demoTable layui-btn')on('click', function(){ var type = $(this)data('type');

active[type] active[type]call(this) : '';

});

此时点击查询按钮，会将keyword这个关键字传到后端，接下来就是自己处理查询关键字业务了。

到目前为止，搜索也有了，分页也有了,对了，分页会自动传到后端page,limit2个值到后台，相当于（pageindex,pagesize）

方法如下：

1、选择某一行第一个下拉框值后，与当前行第二个下拉框联动，数据为动态（后台传输）。

2、点击提交按钮后，将整个表格提交，每一行三个数据以逗号隔开，每一行数据以分号隔开。

以上就是关于layui的数据表格（table）分页篇全部的内容，包括:layui的数据表格（table）分页篇、layui数据表格重载怎么往后台传参、layui表单如何提交下拉框的键值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！