jQuery dataTables四種數據來源[轉]

四種數據來源

對於 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"

],

...

]

}