Jquery Datatables的使用详解

2020-05-29 07:26:34易采站长站整理

名称类型描述
DT_RowIdstringJS

自动绑定到 tr节点上

DT_RowClassstringJS

自动把这个类名添加到 tr

DT_RowDataobjectJS

使用 jQuery.data() 方法把数据绑定到row中,方便之后用来检索(比如加入一个点击事件)

DT_RowAttrobjectJS

自动绑定数据到 tr上,使用 jQuery.attr() 方法,对象的键用作属性,值用作属性的值。注意这个 需要 Datatables 1.10.5+的版本才支持

其实除了data这个字段以外,其他的信息都是交给DT自己控制的,比如说recordsTotal,我们在后端查询出所有记录的数量后,把这个值置好,那么DT收到后就会在这里显示出这个记录的数量。然后我们可以截取data这个列表,进行进一步的绑定处理。

看下服务端定义的出参的格式:


public class CommonDatatableBean
{
private int draw;
private int recordsTotal;
private int recordsFiltered;
private List<Object> data;

public int getDraw()
{
return draw;
}

public void setDraw(int draw)
{
this.draw = draw;
}

public int getRecordsTotal()
{
return recordsTotal;
}

public void setRecordsTotal(int recordsTotal)
{
this.recordsTotal = recordsTotal;
}

public int getRecordsFiltered()
{
return recordsFiltered;
}

public void setRecordsFiltered(int recordsFiltered)
{
this.recordsFiltered = recordsFiltered;
}

public List<Object> getData()
{
return data;
}

public void setData(List<Object> data)
{
this.data = data;
}
}

可以看到这是一个通用的格式,所有的表格数据都可以封装在这个对象中返回,区别就是data中Object类型不同而已。

入参和出参格式说完了,可以看一下DT如何设置ajax请求后端的数据


var operationTableOption = createCommonTableOptions();
operationTableOption.ajax = {
// url可以直接指定远程的json文件,或是MVC的请求地址 /Controller/Action
url: "/operation/query",
type: 'POST',
// 异步调用
async:true,
// 传给服务器的数据,可以添加我们自己的查询参数
data: function (param)
{
param.start = param.start;
param.offset = param.length;
switch (param.order[0].column)