Mikel
[转载]使用 jQuery dataTables – 2 四种数据来源 – haogj – 博客园.
四种数据来源
对于 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 | 数组的数组，表格中的实际数据。 |
<pre>{
"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"
],
...
]
}
