描述(Description)
使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据,最终获取到返回的数据 来显示表格,DataTables 支持 JavaScript数组,JSON数据,可以参考 JavaScript数据数据源、 Ajax数据源
当你使用对象数组作为数据源时,你需要使用
columns.dataOption
来匹对对象的属性,
如果使用的是纯数组则不需要使用,DataTables 会默认按照数组的顺序显示每一个行数据
ajax
接收三种类型的参数:
string
- 设置获取数据的urlobject
- 和 jQuery.ajax 定义类似function
- 自定义获取数据的功能
类型(Type)
这个选项能够接受以下类型的参数:
string
这个是最简单的应用,ajax
指定一个返回数据的url,这个是多个形式的比如
json.txt、json.txt、jsonlist.action、jsonlist.jsp、jsonlist.php……
Datatables默认接收的是一个属性为 data
,如果你返回的数据不是这样,
你需要使用
ajax.dataSrcOption
来处理
默认的数据(对象)格式如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//data.json返回数据格式如下
{
"data": [
{ "name": "Tiger Nixon", "position": "System Architect", "salary": "$3,120", "start_date": "2011/04/25", "office": "Edinburgh", "extn": "5421" },
// row 2 data source,
// etc
]
}
//如下代码初始化
$('#example').DataTable({
"ajax": "data.json",
"columns": [
{"data": "name"},
{"data": "position"},
{"data": "salary"},
{"data": "start_date"},
{"data": "office"},
{"data": "extn"}
]
});
默认的数据(数组)格式如下:
1
2
3
4
5
6
7
8
9
10
11
12
//data.json返回数据格式如下
{
"data": [
["Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$3,120"],
......
]
}
//如下代码初始化
$('#example').DataTable( {
"ajax": "data.json"
} );
object
接收一个对象,其用法类同于 jQuery.ajax , 这里只介绍不相同的,没有列出的参考jQuery文档即可,可以同样适用
data
(ajax.dataOption
) - 与jQuery一样,接收一个对象,这里Datatables对他做出扩展,还可以接收function
,作为 function 时可以操作请求参数,在实际应用中,可以在此函数里加入自定义的条件传到服务器。这个方法在1.9-版本中为fnServerParams
。dataSrc
(ajax.dataSrcOption
) - 如果 DataTables 是通过 ajax 获取取数据,默认情况下,DataTables会去读取返回数据中的data
(在1.9-中是aaData
)对象。这个方法已经取代了1.9-中的sAjaxDataProp
success
这个是在Datatables内部调用的,不能覆盖使用,如果你不满意Datatables的实现,你可以使用ajax.dataSrcOption
处理,或者是把ajax
作为一个函数使用(见下面的说明)
一个简单的例子:
1
2
3
4
5
6
$('#example').dataTable( {
"ajax": {
"url": "data.json",
"type": "POST"
}
} );
function ajax( data, callback, settings )
描述(Description):
作为一个函数,这个可以完全自己控制Ajax请求,请求参数,返回的数据都可以不受 DataTables 的影响。事实上你可以使用非Ajax请求,而直接使用本地储存。你可以直接从本地数据库获取数据交给 callback
去处理
例子如下:
1
2
3
4
5
6
7
$('#example').DataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
} );
注意:在1.10.6+, 当使用了 ajax
属性后,
xhrEvent
事件会被触发(即使没有ajax请求)
参数(Parameters):
名称(Name) | 类型(Type) | 是否可选(Optional) | |
---|---|---|---|
1 | data |
objectJS
|
No |
发送给服务器的数据 | |||
2 | callback |
functionJS
|
No |
必须被执行,DataTables才能获取到数据;且将返回的数据作为callback()的唯一参数.(参数中可以配置Datatable的页面信息) | |||
3 | settings |
DataTables.SettingsType
|
No |
Datatables的设置对象 |
例子(Example)
ajax访问json格式文件获取数据
1
2
3
$('#example').DataTable( {
"ajax": "data.json"
} );
更改Ajax的请求方式
1
2
3
4
5
6
$('#example').DataTable( {
"ajax": {
"url": "data.json",
"type": "POST"
}
} );
添加额外的参数发送到服务器(注意:下列方式不适用于服务器模式)
1
2
3
4
5
6
7
8
$('#example').DataTable( {
"ajax": {
"url": "data.json",
"data": function ( d ) {
d.extra_search = $('#extra').val();
}
}
} );
添加额外的参数发送到服务器(适用服务器模式)
1
2
3
4
5
6
7
8
9
10
11
$('#example').DataTable( {
"serverSide":true,
"ajax": {
"url": "data.json",
"data": function ( d ) {
return $.extend( {}, d, {
"extra_search": $('#extra').val()
} );
}
}
} );
操作服务器返回的数据添加链接,这个使用
columns.renderOption
也可以达到效果,这里只是演示怎么操作返回的数据
1
2
3
4
5
6
7
8
9
10
11
$('#example').DataTable( {
"ajax": {
"url": "data.json",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'">View message</a>';
}
return json;
}
}
} );
获取本地的数据
1
2
3
4
5
6
7
$('#example').dataTable( {
"ajax": function (data, callback, settings) {
callback(
JSON.parse( localStorage.getItem('dataTablesData') )
);
}
} );
相关属性(Related)
下面的选项是直接相关的,也可能是您的应用程序的开发非常有用。
API
Options
不定时一讲
ajax不定时一讲