四种数据来源
对于 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( {
|
[ "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" ]
|
{ "sTitle" : "Platform" },
|
{ "sTitle" : "Version" , "sClass" : "center" },
|
"fnRender" : function (obj) {
|
var sReturn = obj.aData[ obj.iDataColumn ];
|
aoColumns 参数用来定义表格的列,这是一个数组,其中的每一个对象用来定义一列。
对于每一个列对象:
sTitle 定义列的标题
sClass 定义列的样式
fnRender 函数用来渲染列,这个函数将会传递一个参数对象,这个参数对象的 iDataColumn 属性表示当前的列索引,aData 表示当前的行数组。函数返回的结果将被填充到单元格中。
当然了,对于表示行的数组来说,长度应该是相同的。如果某一行数据缺失或者提供了过多地数据的话,就会得到一个警告。
第三种数据来源是 AJAX,也就是说可以向服务器发一个请求来获得数据。
在初始化参数对象中,通过 sAjaxSource 的属性传递请求的地址,bProcessing 表示是否需要显示一个工作中的提示。
在 JSON 方式返回的数据中,需要一个名为 aaData 的属性来提供实际的数据。
$(document).ready( function () {
|
$( '#example' ).dataTable( {
|
"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( {
|
"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 |
数组的数组,表格中的实际数据。 |
服务器返回的数据示例如下:
"iTotalDisplayRecords" : 57,
|
分享到:
相关推荐
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
jquery dataTables两种版本 jquery两种版本 及相关css
jQuery Datatables
官方下载 datatables所需包文件
JQuery DataTables示例,包含分页、拖拽、导出,前端、后台分页都有,项目直接导入就可以使用,项目框架是struts2写Web项目。
jquery datatables前后台数据交互分页实例。
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
使用JQuery.Datatables再也不用烦恼了,非常方便的集成插件,还是老外牛叉啊!
eclipse里面运行的简单组件,通过读取TXT文件显示在页面上,加入bootstrap
jquery1.6 datatables插件1.8 附带例子 API等 WEB页面显示列表,课排序 列过滤 隐藏列等功能
Datatables是一款jquery表格插件。它是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能,包括排序、分页、扩展、主题、国际化等
仿jquery.dataTables的分页(查询+排序),jquery插件式开发简单示例。
jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,但是官网是PHP的例子,特意做...
Jquery dataTables插件 支持静态分页 排序 固定表头 ajax事件 等等 简单易上手
避免由于session失效,引发DataTable向后台发送ajax请求时弹窗报错而不是重定向到指定页面,详情https://blog.csdn.net/xssl_CSDN/article/details/83660015
里面是jquery.dataTables的引用包。使用简单,只需要引用js和css的包在家一个html文件即可,使用方法笔记里面有。
在用jquery datatables开发,它的在线帮助打开很慢,很影响工作,就做了这个离线文档以便使用,特分享一下,随便挣几个工分下载时用
适合前端初学者 jquery中的datatable使用ajax读取数据 并展示表格数据
挺好用的表格插件, 官网地址:http://www.datatables.net/