jQuery dataTables四种数据发源[转]

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" 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"????} );} );

对于服务器来说，可以通过请求参数来获得当前的操作信息。

类型名称说明intiDisplayStart显示的起始索引intiDisplayLength显示的行数intiColumns显示的列数stringsSearch全局搜索字段?booleanbEscapeRegex全局搜索是否正则booleanbSortable_(int)表示一列是否在客户端被标志位可排序booleanbSearchable_(int)表示一列是否在客户端被标志位可搜索stringsSearch_(int)个别列的搜索booleanbEscapeRegex_(int)个别列是否使用正则搜索intiSortingCols排序的列数?intiSortCol_(int)被排序的列stringsSortDir_(int)排序的方向 "desc" 或者 "asc".stringsEcho?DataTables 用来生成的信息

这篇文章介绍了在 C# 中结合 LINQ 使用 DataTables 进行服务端处理的经验?jQuery DataTables Plugin Meets C#

服务器应该返回如下的 JSON 格式数据

类型名称说明intiTotalRecords实际的行数intiTotalDisplayRecords过滤之后，实际的行数。stringsEcho来自客户端 sEcho 的没有变化的复制品，stringsColumns可选，以逗号分隔的列名，　　　　array array mixedaaData数组的数组，表格中的实际数据。　　　　

服务器返回的数据示例如下：

{????"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"????????],????????...????]}

?