四种数据来源
对于 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"
],
...
]
}
相关推荐
jquery-datatables-rails, 用于 Rails的jquery数据表 gem jquery-datatables-rails 这个 gem 为 jQuery DataTables插件提供了方便,以便与 Rails 资产pipleine结合使用。 它提供所有基本的datatable文件,以及一些...
挺好用的表格插件, 官网地址:http://www.datatables.net/
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)版.zip; ...
DataTables - jQuery表格插件
赠送jar包:datatables-1.9.4.jar; 赠送原API文档:datatables-1.9.4-javadoc.jar; 赠送Maven依赖信息文件:datatables-1.9.4.pom; 包含翻译后的API文档:datatables-1.9.4-javadoc-API文档-中文(简体)-英语-对照...
Laravel开发-laravel-datatables-oracle Laravel 4_5的jquery数据表API
开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery.dataTables.min开发工具 jquery....
DataTables-1.8.1.zipDataTables-1.8.1.zipDataTables-1.8.1.zipDataTables-1.8.1.zip
资源分类:Python库 所属语言:Python 资源全名:django-datatables-view-1.12.tar.gz 资源来源:官方 安装方法:https://lanzao.blog.csdn.net/article/details/101784059
Spring Boot+MybatisPlus使用JQuery DataTables表格插件展示数据、实现分页和模糊查询等功能
datatables-editor-1.6.1 破解版
DataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zipDataTables-1.7.6.zip
jquery-datatables-rails 该gem打包了jQuery 插件,可轻松与Rails 3.1+资产pipleine一起使用。 它提供了所有基本的DataTables文件以及一些其他功能。 重要的 当前的gem已发布,没有更新的插件。 jQuery DataTables...
vue-datatables-net Vue jQuery DataTables.net包装器组件 该库是的Vue 2包装器。 这是一个很小的包装程序,不包含任何内容,甚至不包含datatables.net核心库。 注意:之所以找到该库,是因为您想在应用程序中使用...
Laravel开发-laravel-datatables-buttons Laravel数据表按钮插件。
Datatables中文网 基于 jQuery 的表格插件,灵活,强大 | 1,如何使用? <!--第一步:引入Javascript / CSS (CDN)--> <!-- DataTables CSS --> <link rel="stylesheet" type="text/css" href=...
laravel-datatables-demo, Laravel 数据表演示应用程序 #Laravel 数据表演示程序Laravel 4 |5的数据表包 这个包是通过使用Eloquent的ORM或者Fluent查询生成器来处理 DataTables插件的服务器端工作的服务器端工作的。...
前端项目-datatables-colvis,ColVis adds a button to the toolbars around DataTables which gives the end user of the table the ability to dynamically change the visibility of the columns in the table
DataTables-1.9.4 + 1.10.12 两个版本
jquery dataTables两种版本 jquery两种版本 及相关css