使用 jQuery dataTables - 2 四種資料來源

comeontony發表於2012-01-04
jQuery

四種資料來源

對於 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"
         ],
         ...
     ]
}

相關文章