四種數據來源
對於 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 表示當前的行數組。函數返回的結果將被填充到單元格中。
當然了，對於表示行的數組來說，長度應該是相同的。如果某一行數據缺失或者提供了過多地數據的話，就會得到一個警告。
使用 jQuery dataTables - 2 四種數據來源_www.fengfly.com
第三種數據來源是 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"
],
...
]
}
原文來自：雨楓技術教程網 http://www.fengfly.com
原文網址：http://www.fengfly.com/plus/view-196740-1.html