jquery datatables

最新推荐文章于 2024-08-01 11:09:48 发布
最新推荐文章于 2024-08-01 11:09:48 发布
阅读量1.3w 收藏 4
点赞数
分类专栏： js/jquery 文章标签： jquery data tables 表格 javascript

在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用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"
    } );
} );

对于服务器来说，可以通过请求参数来获得当前的操作信息。

类型名称说明
intiDisplayStart显示的起始索引
intiDisplayLength显示的行数
intiColumns显示的列数
stringsSearch全局搜索字段 
booleanbEscapeRegex全局搜索是否正则
booleanbSortable_(int)表示一列是否在客户端被标志位可排序
booleanbSearchable_(int)表示一列是否在客户端被标志位可搜索
stringsSearch_(int)个别列的搜索
booleanbEscapeRegex_(int)个别列是否使用正则搜索
intiSortingCols 排序的列数 
intiSortCol_(int)被排序的列
stringsSortDir_(int)排序的方向 "desc" 或者 "asc".
stringsEcho DataTables 用来生成的信息

这篇文章介绍了在 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"
        ],
        ...
    ]
}


详细配置

1、DataTables的默认配置

$(document).ready(function() {
$('#example').dataTable();
} );

示例：http://www.guoxk.com/html/DataTables/Zero-configuration.html

2、DataTables的一些基础属性配置

"bPaginate": true, //翻页功能
"bLengthChange": true, //改变每页显示数据数量
"bFilter": true, //过滤功能
"bSort": false, //排序功能
"bInfo": true,//页脚信息
"bAutoWidth": true//自动宽度

示例：http://www.guoxk.com/html/DataTables/Feature-enablement.html

3、数据排序

$(document).ready(function() {
$('#example').dataTable( {
"aaSorting": [
[ 4, "desc" ]
]
} );
} );

从第0列开始，以第4列倒序排列

示例：http://www.guoxk.com/html/DataTables/Sorting-data.html

4、多列排序

示例：http://www.guoxk.com/html/DataTables/Multi-column-sorting.html

5、隐藏某些列

$(document).ready(function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bSearchable": false, "bVisible": false, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] }
] } );
} );

示例：http://www.guoxk.com/html/DataTables/Hidden-columns.html

6、改变页面上元素的位置

$(document).ready(function() {
$('#example').dataTable( {
"sDom": '<"top"fli>rt<"bottom"p><"clear">'
} );
} );
//l- 每页显示数量
//f - 过滤输入
//t - 表单Table
//i - 信息
//p - 翻页
//r - pRocessing
//< and > - div elements
//<"class" and > - div with a class
//Examples: <"wrapper"flipt>, <lf<t>ip>

示例：http://www.guoxk.com/html/DataTables/DOM-positioning.html

7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

$(document).ready(function() {
$('#example').dataTable( {
"bStateSave": true
} );
} );

示例：http://www.guoxk.com/html/DataTables/State-saving.html

8、显示数字的翻页样式

$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );

示例：http://www.guoxk.com/html/DataTables/Alternative-pagination-styles.html

9、水平限制宽度

$(document).ready(function() {
$('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true
} );
} );

示例：http://www.guoxk.com/html/DataTables/Horizontal.html

10、垂直限制高度

示例：http://www.guoxk.com/html/DataTables/Vertical.html

11、水平和垂直两个方向共同限制

示例：http://www.guoxk.com/html/DataTables/HorizontalVerticalBoth.html

12、改变语言

$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );

示例：http://www.guoxk.com/html/DataTables/Change-language-information.html

13、click事件

示例：http://www.guoxk.com/html/DataTables/event-click.html

14/配合使用tooltip插件

示例：http://www.guoxk.com/html/DataTables/tooltip.html

15、定义每页显示数据数量

$(document).ready(function() {
$('#example').dataTable( {
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
} );
} );

示例：http://www.guoxk.com/html/DataTables/length_menu.html

16、row callback

示例：http://www.guoxk.com/html/DataTables/RowCallback.html

最后一列的值如果为“A”则加粗显示

17、排序控制

$(document).ready(function() {
$('#example').dataTable( {
"aoColumns": [
null,
{ "asSorting": [ "asc" ] },
{ "asSorting": [ "desc", "asc", "asc" ] },
{ "asSorting": [ ] },
{ "asSorting": [ ] }
]
} );
} );

示例：http://www.guoxk.com/html/DataTables/sort.html
说明：第一列点击按默认情况排序，第二列点击已顺序排列，第三列点击一次倒序，二三次顺序，第四五列点击不实现排序

18、从配置文件中读取语言包

$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sUrl": "cn.txt"
}
} );
} );

19、是用ajax源

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": './arrays.txt'
} );
} );

示例：http://www.guoxk.com/html/DataTables/ajax.html

20、使用ajax，在服务器端整理数据

$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sPaginationType": "full_numbers",

"sAjaxSource": "./server_processing.php",
/*如果加上下面这段内容，则使用post方式传递数据
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
}*/
"oLanguage": {
"sUrl": "cn.txt"
},
"aoColumns": [
{ "sName": "platform" },
{ "sName": "version" },
{ "sName": "engine" },
{ "sName": "browser" },
{ "sName": "grade" }
]//$_GET['sColumns']将接收到aoColumns传递数据
} );
} );

示例：http://www.guoxk.com/html/DataTables/ajax-serverSide.html

21、为每行加载id和class

(本人没看明白)

服务器端返回数据的格式：

{
"DT_RowId": "row_8",
"DT_RowClass": "gradeA",
"0": "Gecko",
"1": "Firefox 1.5",
"2": "Win 98+ / OSX.2+",
"3": "1.8",
"4": "A"
},

示例：http://www.guoxk.com/html/DataTables/add_id_class.html

22、为每行显示细节，点击行开头的“+”号展开细节显示

示例：http://www.guoxk.com/html/DataTables/with-row-information.html

23、选择多行

示例：http://www.guoxk.com/html/DataTables/selectRows.html

22、集成jQuery插件jEditable

示例：http://www.guoxk.com/html/DataTables/jEditable-integration.html

 

 

示例打包下载：http://www.guoxk.com/html/DataTables/DataTables.rar


内容来自：

http://www.cnblogs.com/haogj/archive/2011/03/05/1971335.html

http://www.guoxk.com/node/jquery-datatables

沈家大帅
关注
专栏目录
Datatables插件-四种数据来源
野生码农
10-25 494
Datatables功能强大，支持分页，支持行数限制。 支持前端做二次搜索，前端接收所有数据，再输入关键词，可以过滤很多无用行。 填充数据即可使用，免去了图形绘制等琐碎劳动。 Datatables使用较为简单，支持数组，前端ajax接收到返回的消息之后，将json数组转化成数组，然后提供给这个组件，接着指定列名。 重点：下面的资料描述不清楚。仅供参考。前缀aaData，aoColumns，...
jQuery DataTables插件自定义Ajax分页实例解析
10-22
在本篇文章中，我们主要探讨了如何利用jQuery DataTables插件实现自定义Ajax分页功能。DataTables是一个强大的jQuery插件，它可以轻松地将普通的HTML表格转化为具有高级控制功能的表格，例如搜索、排序、分页等。在...
使用 jQuery dataTables - 2 四种数据来源
weixin_34378767的博客
03-05 139
四种数据来源 对于 dataTables 来说，支持四种表格数据来源。 最为基本的就是来源于网页，网页被浏览器解析为 DOM 对象，在 dataTables 中称为  DOM 来源。 $(document).ready(function() { $('#example').dataTable(); } ); 第二种数据来源为数组， JavaScript 中的数组，通过在初...
JQuery：Datatables
最新发布
一些平时在开发过程中遇到的常见问题，分享给大家
08-01 452
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。
php datatables,DataTables四种数据源
weixin_31163527的博客
03-12 353
DataTables是一款非常简单的前端表格展示插件，它支持排序，翻页，搜索以及在客户端和服务端分页等多种功能。官方介绍：DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancem...
使用 jQuery dataTables - 1
weixin_34221073的博客
03-04 104
jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。 首先，需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库， 目前的版本是 1.7.5，下载的压缩...
JQuery DataTables学习
weixin_34224941的博客
07-30 133
1、Datatables简单介绍          DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，根据的基础逐步增强，这将添加先进的互动控制。支持不论什么HTML表格。主要特点：自己主动分页处理即时表格数据过滤数据排序以及数据类型自己主动检測自己主动处理列宽度可通过CSS定制样式支持隐藏列易用可扩展性和灵活性国际化动态创建表格免费的2、怎样使用：          ...
jQuery Datatables表头不对齐的解决办法
10-18
在使用jQuery Datatables进行网页数据展示时，可能会遇到表头（thead）与表格内容（tbody）对齐问题，尤其是在浏览器窗口大小变化或者响应式布局中。这个问题通常表现为表头与内容列宽不一致，造成视觉上的错位。...
自定义使用jQuery DataTables插件生成的PDF
04-04
在本文中，我们将深入探讨如何自定义使用jQuery DataTables插件生成的PDF文件。jQuery DataTables是一个强大且灵活的JavaScript库，它增强了HTML表格的功能，提供了数据排序、搜索、分页等多种功能。当需要将表格...
jquery datatables 所需文件 官方下载的
11-19
**jQuery DataTables 知识点详解** `jQuery DataTables` 是一个强大且功能丰富的JavaScript库，用于将HTML表格转化为交互式的数据展示工具。这个库基于jQuery框架，提供了数据排序、搜索、分页以及多种自定义功能，...
JQuery DataTables示例，包含分页、拖拽、导出
10-12
**jQuery DataTables 深入理解与应用** jQuery DataTables 是一个强大且功能丰富的JavaScript库，用于增强HTML表格。它提供了各种高级特性，如分页、排序、过滤、搜索、数据加载以及更多，大大提升了用户体验。在这...
dataTables.js
12-22
目前最流行的13个表格插件中，功能最强大的表格插件dataTables.js
Datatables jquery表格插件
05-21
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能，包括排序、分页、扩展、主题、国际化等
jQuery Datatables
xfy196的博客
04-18 226
jQuery Datatables DataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 中文网站：http://www.datatables.club/ 实例索引：http://www.datatables.club/example/ 参考手册：http://www.datatables.club/manual/ 帮助文档：h...
jQuery dataTables
comeontony的博客
01-05 145
DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。主要特点：http://www.datatables.net/ 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处理列宽度 可通过CSS定制样式 支持隐藏列 易用 可扩展性和灵活性 国际化 动态创建表格 免费的 ...
Jquery DataTables学习笔记（一）
weixin_30363981的博客
05-24 111
准备工作： 了解DataTables 官方网站：http://www.datatables.net/ 简介：DataTables是一个jQuery的表格插件。这是一个高度灵活的工具，依据的基础逐步增强，这将增加先进的互动控制，支持任何HTML表格。 主要特点： 自动分页处理 即时表格数据过滤 数据排序以及数据类型自动检测 自动处...
jquery dataTables
sddcc123的专栏
12-27 3028
dataTables是jquery推出的一个功能强大的插件 请求数据时，它有很多的参数可以设置。这里主要说明其，API function的使用 在百度上输入关键字“datatables API functions”进行搜索，或者直接进入http://www.datatables.net/api 常用的用fnAddData fnClearTable fnDraw 等，注意的是，如databin
DataTables - 增强 HTML 表格功能的 jQuery 插件
gitblog_00008的博客
03-08 528
DataTables - 增强 HTML 表格功能的 jQuery 插件 DataTablesTables plug-in for jQuery项目地址:https://gitcode.com/gh_mirrors/da/DataTables DataTables 是一个优秀的 jQuery 插件，用于增强 HTML 表格的功能。它提供了丰富的数据排序、搜索和显示选项，并支持多种数据源和 API...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值