使用 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"

         ],

         ...

     ]

}