四种数据来源
对于 dataTables 来说，支持四种表格数据来源。
最为基本的就是来源于网页，网页被浏览器解析为 DOM 对象，在 dataTables 中称为? DOM 来源。
$(document).ready(
function
() {
????
$(
'#example'
).dataTable();
} );
|
第二种数据来源为数组， JavaScript 中的数组，通过在初始化对象中传递一个名为 aaData 的数组，同样可以提供表格数据，前缀 aa 说明这是一个数组的数组，外层的数组表示表格的行，每一行同样是一个数组。
$(document).ready(
function
() {
????
$(
'#demo'
).html(
'<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>'
);
????
$(
'#example'
).dataTable( {
????????
"aaData"
: [
????????????
/* Reduced data set */
????????????
[
"Trident"
,
"Internet Explorer 4.0"
,
"Win 95+"
, 4,
"X"
],
????????????
[
"Trident"
,
"Internet Explorer 5.0"
,
"Win 95+"
, 5,
"C"
],
????????????
[
"Trident"
,
"Internet Explorer 5.5"
,
"Win 95+"
, 5.5,
"A"
],
????????????
[
"Trident"
,
"Internet Explorer 6.0"
,
"Win 98+"
, 6,
"A"
],
????????????
[
"Trident"
,
"Internet Explorer 7.0"
,
"Win XP SP2+"
, 7,
"A"
],
????????????
[
"Gecko"
,
"Firefox 1.5"
,
"Win 98+ / OSX.2+"
, 1.8,
"A"
],
????????????
[
"Gecko"
,
"Firefox 2"
,
"Win 98+ / OSX.2+"
, 1.8,
"A"
],
????????????
[
"Gecko"
,
"Firefox 3"
,
"Win 2k+ / OSX.3+"
, 1.9,
"A"
],
????????????
[
"Webkit"
,
"Safari 1.2"
,
"OSX.3"
, 125.5,
"A"
],
????????????
[
"Webkit"
,
"Safari 1.3"
,
"OSX.3"
, 312.8,
"A"
],
????????????
[
"Webkit"
,
"Safari 2.0"
,
"OSX.4+"
, 419.3,
"A"
],
????????????
[
"Webkit"
,
"Safari 3.0"
,
"OSX.4+"
, 522.1,
"A"
]
????????
],
????????
"aoColumns"
: [
????????????
{
"sTitle"
:
"Engine"
},
????????????
{
"sTitle"
:
"Browser"
},
????????????
{
"sTitle"
:
"Platform"
},
????????????
{
"sTitle"
:
"Version"
,
"sClass"
:
"center"
},
????????????
{
????????????????
"sTitle"
:
"Grade"
,
????????????????
"sClass"
:
"center"
,
????????????????
"fnRender"
:
function
(obj) {
????????????????????
var
sReturn = obj.aData[ obj.iDataColumn ];
????????????????????
if
( sReturn ==
"A"
) {
????????????????????????
sReturn =
"<b>A</b>"
;
????????????????????
}
????????????????????
return
sReturn;
????????????????
}
????????????
}
????????
]
????
} );???
} );
|
aoColumns 参数用来定义表格的列，这是一个数组，其中的每一个对象用来定义一列。
对于每一个列对象：
sTitle 定义列的标题
sClass 定义列的样式
fnRender 函数用来渲染列，这个函数将会传递一个参数对象，这个参数对象的 iDataColumn 属性表示当前的列索引，aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
当然了，对于表示行的数组来说，长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话，就会得到一个警告。
第三种数据来源是 AJAX，也就是说可以向服务器发一个请求来获得数据。
在初始化参数对象中，通过 sAjaxSource 的属性传递请求的地址，bProcessing 表示是否需要显示一个工作中的提示。
在 JSON 方式返回的数据中，需要一个名为 aaData 的属性来提供实际的数据。
$(document).ready(
function
() {
????
$(
'#example'
).dataTable( {
????????
"bProcessing"
:
true
,
????????
"sAjaxSource"
:
'../examples_support/json_source.txt'
????
} );
} );
|
其中 json_source.txt 就是 JSON 数据，其中定义了一个名为 aaData 的属性。这个文件可以在下载的压缩包中找到，在 examples\examples_support 文件夹中。
最后一种数据来源是服务器，对于大量的数据来说，你可能希望在服务器端完成所有的操作，分页、排序、过滤等等。dataTable 可以通过服务器完成这些功能，甚至其他的服务器，像??Google Gears?或者 Adobe Air，这样的话，dataTables 就是一个显示数据和提供操作事件的前端模块。
$(document).ready(
function
() {
????
$(
'#example'
).dataTable( {
????????
"bProcessing"
:
true
,
????????
"bServerSide"
:
true
,
????????
"sAjaxSource"
:
"../examples_support/server_processing.php"
????
} );
} );
|
对于服务器来说，可以通过请求参数来获得当前的操作信息。
| 类型 | 名称 | 说明 |
| int | iDisplayStart | 显示的起始索引 |
| int | iDisplayLength | 显示的行数 |
| int | iColumns | 显示的列数 |
| string | sSearch | 全局搜索字段? |
| boolean | bEscapeRegex | 全局搜索是否正则 |
| boolean | bSortable_(int) | 表示一列是否在客户端被标志位可排序 |
| boolean | bSearchable_(int) | 表示一列是否在客户端被标志位可搜索 |
| string | sSearch_(int) | 个别列的搜索 |
| boolean | bEscapeRegex_(int) | 个别列是否使用正则搜索 |
| int | iSortingCols | 排序的列数? |
| int | iSortCol_(int) | 被排序的列 |
| string | sSortDir_(int) | 排序的方向 "desc" 或者 "asc". |
| string | sEcho | ?DataTables 用来生成的信息 |
这篇文章介绍了在 C# 中结合 LINQ 使用 DataTables 进行服务端处理的经验 jQuery DataTables Plugin Meets C#
服务器应该返回如下的 JSON 格式数据
| 类型 | 名称 | 说明 |
| int | iTotalRecords | 实际的行数 |
| int | iTotalDisplayRecords | 过滤之后，实际的行数。 |
| string | sEcho | 来自客户端 sEcho 的没有变化的复制品， |
| string | sColumns | 可选，以逗号分隔的列名， |
| array array mixed | aaData | 数组的数组，表格中的实际数据。 |
服务器返回的数据示例如下：
{
????
"sEcho"
: 3,
????
"iTotalRecords"
: 57,
????
"iTotalDisplayRecords"
: 57,
????
"aaData"
: [
????????
[
????????????
"Gecko"
,
????????????
"Firefox 1.0"
,
????????????
"Win 98+ / OSX.2+"
,
????????????
"1.7"
,
????????????
"A"
????????
],
????????
[
????????????
"Gecko"
,
????????????
"Firefox 1.5"
,
????????????
"Win 98+ / OSX.2+"
,
????????????
"1.8"
,
????????????
"A"
????????
],
????????
...
????
]
}