参数详解连接
ajax.dataSrcOption
接着昨天的dataSrc作为function时能处理什么复杂的情况呢? 在这里可以把dataSrc和jQuery的ajax的success方法一起看,或者对于Datatables来说dataSrc是success的扩展、加强
1
2
3
4
5
6
$.ajax({
url:"data.json",
success:function(result){
//result其实就是data.json的数据,那么当服务器返回的数据格式不是Datatables所支持的格式怎么办?这个时候就可以用到dataSrc来处理这个情况
}
})
先假设data.json的数据格式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
msg:"成功返回数据",
listdata:{
treeData:[
{id:1,pid:0,name:"节点一"},
{id:2,pid:1,name:"节点二"}
],
tableData:{
page:1,
draw:1,
size:58,
filter_size:2,
data:[
{name:"中文网",age:2},
{name:"datatables",age:3}
]
}
},
status:true
}
相信很多小伙伴的数据格式比这个还要复杂,各种嵌套,各种包含,那么这里注意一点,认清Datatables所支持的格式(参考服务器模式),把这点弄明白,实际上就不难了,看下面代码,怎么使用上面所示格式的数据交给Datatables去处理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
var table = $("#tableid").DataTable({
ajax:{
url:"data.json",
dataSrc:function(result){
//这里result和上面jquery的ajax的代码类似,也是可以得到data.json的数据,但是这样的格式,Datatables不能直接使用,这时候需要在这里处理一下
//直接返回Datatables需要的那部分数据即可,看到这里,大家或许又懂了些什么看到了他的强大和灵活
return result.listdata.tableData.data;
}
},
columns:[
{data:"name"},
{data:"age"}
]
});
更新:2017年6月25日
对于使用服务器模式的小伙伴,参考如下代码:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var table = $("#tableid").DataTable({
serverSide:true,
ajax:{
url:"data.action",
dataSrc:function(result){
//这里除了把数据处理后返回给DataTables,还需要把另外三个参数处理为顶级的属性
result.draw = result.listdata.tableData.draw;
result.recordsTotal = result.listdata.tableData.size;
result.recordsFiltered = result.listdata.tableData.filter_size;
//这里result和上面jquery的ajax的代码类似,也是可以得到data.json的数据,但是这样的格式,Datatables不能直接使用,这时候需要在这里处理一下
//直接返回Datatables需要的那部分数据即可,看到这里,大家或许又懂了些什么看到了他的强大和灵活
return result.listdata.tableData.data;
}
},
columns:[
{data:"name"},
{data:"age"}
]
});