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请求数据，最后再tableIns.reload({ data: res.data })一波，达成666 *** 作。

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

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

1、首先前台用Ajax，其中注意dataType一定要选择json方式，Action成功返回给页面渗喊的Json内容是这样的[{"number":"V006","names":"LiLei"}],可见comment['names']对应"names":"LiLei"，comment['number']对应"number":"V006"友闭。

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

$.ajax({

type:

"post",

url:'apply/mystudent.action?',

cache:

false,

dataType

:

"json",

success:

function(data){

$.each(data,

function(commentIndex,

comment){

alert("姓名"+

comment['names'])

alert("学号"+comment['number'])

})

}

})

2、Ajax的丛告野URL指向在java的action中mystudent方法，返回的list其实是一个对象Student，包括了names和nunmber字段

?

1

2

3

4

5

6

7

public

String

mystudent()

throws

Exception{

List

list=priceService.query()//调用接口实现类

this.jsonUtil(list)

return

null

默认接口格式

{

code: 0,

msg: "",

count: 1000,

data: []

}

如果你不想修改自己框架的JSON返回接口喊码

可以自己定义下接收的格式

response: {

statusName: 'status' //数据状态的字段名称，默认：code

,statusCode: 200 //成功的状态码，默认：0

,msgName: 'hint' //状态信息凳渗裂的字段名称，默认：msg

,countName: 'total' //数据总数枣闭的字段名称，默认：count

,dataName: 'rows' //数据列表的字段名称，默认：data

---