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" |
], |
... |
] |
} |
转载于:https://my.oschina.net/u/2260184/blog/540577
最新文章
- 08. Web大前端时代之:HTML5+CSS3入门系列 ~ QQ空间时间轴
- nginx、fastCGI、php-fpm关系梳理(转)
- XproerIM V2开源,基于XproerUI引擎构架
- 【iOS】彩色TabBar切换动画实现
- insert into hi_user_score set hello_id=74372073,a=10001 on duplicate key update hello_id=74372073, a=10001
- Asp.net mvc5 解析route源码实现自己的route系统
- js查找出现次数最多的字母
- org.springframework.dao.EmptyResultDataAccessException
- jquery解决onmouseover和onmouseout合用的bug问题
- NET Core 1.0 RC2
- NOIP 2012 解决问题的方法
- ef code first 您没有所需权限
- java_抽象类
- 团队作业7——第二次项目冲刺(Beta版本)
- copy代码(含static对象)留下的致命错误
- Java中ArrayList学习笔记
- String字符串创建与存储机制
- C# 《编写高质量代码改善建议》整理&;笔记 --(五)类型设计
- Python——SQL——将查询的数据列表化
- Python【每日一问】12
热门文章
- javascript中常见的表单验证项
- VBScript - 弹出“文件选择对话框”方法大全!
- JMeter 接口测试 自动生成签名机制
- selenium 鼠标滑动操作验证码
- Loop Unrolling 循环展开
- python3的subprocess的各个方法的区别(-)
- NS网络仿真,小白起步版,双节点之间的模拟仿真(基于TCP和FTP流)
- BaseRuntimeException自定义业务异常类实现
- Linux c++ vim环境搭建系列(1)——Ubuntu18.04.4编译安装vim8.2
- 表字段或表名出现Mysql关键字或保留字导致问题 Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: You have