描述(Description)

使用这个参数可以让 DataTables 像使用jQuery ajax 一样从一个数据源获取数据，最终获取到返回的数据

来显示表格，DataTables 支持 JavaScript数组，JSON数据，可以参考

JavaScript数据数据源、

Ajax数据源

当你使用对象数组作为数据源时，你需要使用

columns.dataOption

来匹对对象的属性，

如果使用的是纯数组则不需要使用，DataTables 会默认按照数组的顺序显示每一个行数据

ajax 接收三种类型的参数：

string - 设置获取数据的url

object - 和 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)

发送给服务器的数据

2

callback

No

必须被执行，DataTables才能获取到数据;且将返回的数据作为callback()的唯一参数.(参数中可以配置Datatable的页面信息)

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

json[i][0] = 'View message';

}

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