使用 jQuery dataTables - 2 四种数据来源

来源：互联网发布：java防止接口重复提交编辑：程序博客网时间：2024/06/05 02:39

四种数据来源

对于 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

0 0