您的位置:首页 > Web前端 > JQuery

jQuery dataTables四种数据来源[转]

2015-12-08 00:00 771 查看


四种数据来源
对于 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"
} );
} );
对于服务器来说,可以通过请求参数来获得当前的操作信息。
类型名称说明
intiDisplayStart显示的起始索引
intiDisplayLength显示的行数
intiColumns显示的列数
stringsSearch全局搜索字段
booleanbEscapeRegex全局搜索是否正则
booleanbSortable_(int)表示一列是否在客户端被标志位可排序
booleanbSearchable_(int)表示一列是否在客户端被标志位可搜索
stringsSearch_(int)个别列的搜索
booleanbEscapeRegex_(int)个别列是否使用正则搜索
intiSortingCols排序的列数
intiSortCol_(int)被排序的列
stringsSortDir_(int)排序的方向 "desc" 或者 "asc".
stringsEchoDataTables 用来生成的信息
这篇文章介绍了在 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"
],
...
]
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  dataTables