jquery datatables - 博客频道 - CSDN.NET
心静如水，方自不乱
分类：js/jquery
在做后台的时候并没有美工和前端工程师来配合你做页面，为了显示数据并有一定的美感，我们可以使用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&&;
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&
对于服务器来说，可以通过请求参数来获得当前的操作信息。
iDisplayStart
显示的起始索引
iDisplayLength
显示的行数
显示的列数
全局搜索字段&
bEscapeRegex
全局搜索是否正则
bSortable_(int)
表示一列是否在客户端被标志位可排序
bSearchable_(int)
表示一列是否在客户端被标志位可搜索
sSearch_(int)
个别列的搜索
bEscapeRegex_(int)
个别列是否使用正则搜索
iSortingCols
排序的列数&
iSortCol_(int)
被排序的列
sSortDir_(int)
排序的方向 &desc& 或者 &asc&.
&DataTables 用来生成的信息
这篇文章介绍了在 C# 中结合 LINQ 使用 DataTables 进行服务端处理的经验
服务器应该返回如下的 JSON 格式数据
iTotalRecords
实际的行数
iTotalDisplayRecords
过滤之后，实际的行数。
来自客户端 sEcho 的没有变化的复制品，
可选，以逗号分隔的列名，　　　　
array array mixed
数组的数组，表格中的实际数据。　　　　
服务器返回的数据示例如下：
&sEcho&: 3,
&iTotalRecords&: 57,
&iTotalDisplayRecords&: 57,
&aaData&: [
&Firefox 1.0&,
&Win 98+ / OSX.2+&,
&Firefox 1.5&,
&Win 98+ / OSX.2+&,
1、DataTables的默认配置
$(document).ready(function() {
$('#example').dataTable();
2、DataTables的一些基础属性配置
&bPaginate&: true, //翻页功能
&bLengthChange&: true, //改变每页显示数据数量
&bFilter&: true, //过滤功能
&bSort&: false, //排序功能
&bInfo&: true,//页脚信息
&bAutoWidth&: true//自动宽度
3、数据排序
$(document).ready(function() {
$('#example').dataTable( {
&aaSorting&: [
[ 4, &desc& ]
从第0列开始，以第4列倒序排列
<span style="color:#、多列排序
5、隐藏某些列
$(document).ready(function() {
$('#example').dataTable( {
&aoColumnDefs&: [
{ &bSearchable&: false, &bVisible&: false, &aTargets&: [ 2 ] },
{ &bVisible&: false, &aTargets&: [ 3 ] }
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&
7、状态保存，使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。
$(document).ready(function() {
$('#example').dataTable( {
&bStateSave&: true
8、显示数字的翻页样式
$(document).ready(function() {
$('#example').dataTable( {
&sPaginationType&: &full_numbers&
9、水平限制宽度
$(document).ready(function() {
$('#example').dataTable( {
&sScrollX&: &100%&,
&sScrollXInner&: &110%&,
&bScrollCollapse&: true
10、垂直限制高度
<span style="color:#、水平和垂直两个方向共同限制
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' /&&
13、click事件
14/配合使用tooltip插件
15、定义每页显示数据数量
$(document).ready(function() {
$('#example').dataTable( {
&aLengthMenu&: [[10, 25, 50, -1], [10, 25, 50, &All&]]
16、row callback
最后一列的&#20540;如果为“A”则加粗显示
17、排序控制
$(document).ready(function() {
$('#example').dataTable( {
&aoColumns&: [
{ &asSorting&: [ &asc& ] },
{ &asSorting&: [ &desc&, &asc&, &asc& ] },
{ &asSorting&: [ ] },
{ &asSorting&: [ ] }
说明：第一列点击按默认情况排序，第二列点击已顺序排列，第三列点击一次倒序，二三次顺序，第四五列点击不实现排序
18、从配置文件中读取语言包
$(document).ready(function() {
$('#example').dataTable( {
&oLanguage&: {
&sUrl&: &cn.txt&
19、是用ajax源
$(document).ready(function() {
$('#example').dataTable( {
&bProcessing&: true,
&sAjaxSource&: './arrays.txt'
20、使用ajax，在服务器端整理数据
$(document).ready(function() {
$('#example').dataTable( {
&bProcessing&: true,
&bServerSide&: true,
&sPaginationType&: &full_numbers&,
&sAjaxSource&: &./server_processing.php&,
/*如果加上下面这段内容，则使用post方式传递数据
&fnServerData&: function ( sSource, aoData, fnCallback ) {
&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传递数据
21、为每行加载id和class
(本人没看明白)
服务器端返回数据的&#26684;式：
&DT_RowId&: &row_8&,
&DT_RowClass&: &gradeA&,
&0&: &Gecko&,
&1&: &Firefox 1.5&,
&2&: &Win 98&#43; / OSX.2&#43;&,
&3&: &1.8&,
22、为每行显示细节，点击行开头的“&#43;”号展开细节显示
23、选择多行
22、集成jQuery插件jEditable
示例打包下载：
内容来自：
/haogj/archive//1971335.html
/node/jquery-datatables
Naruto_ahu
排名：第12620名
（17）（0）（0）（3）（9）（1）（3）（17）（10）（1）（6）（9）（0）（1）（6）（5）（1）（5）（10）（1）（1）（1）（0）（1）给表格添加索引(Type selector-modifier 应用)
博客 DataTables中文网
DataTable中文网
10 July 2016
复制本页地址
表格上第一列加上索引，这是一个很好的用户体验，首先可以一眼知道多少条数据，也能短时间里记忆操作的地方。总的来说
加上索引已经成为一个表格的标配，但是 DataTables 没有直接提供参数或者 API 方法来添加这个索引，不过作者还是给出了他自己的
解决方案，虽然还是要写点代码，但是对于我们来说，不是更灵活了么？凡是要往好的方面想，对吧？
客户端模式下添加行号
看下面的代码，看作者是怎么给第一列添加索引列的。
12&table id="example" class="display" cellspacing="0" width="100%"&
&th&Name&/th&
&th&Position&/th&
&th&Office&/th&
&th&Age&/th&
&th&Salary&/th&
$(document).ready(function() {
var t = $('#example').DataTable({
"columns":[
{"data":null},
{"data":"Name"},
{"data":"Position"},
{"data":"Office"},
{"data":"Age"},
{"data":"Salary"}
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
"order": [[1, 'asc']]
t.on('order.dt search.dt',function() {
t.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
cell.innerHTML = i + 1;
}).draw();
注意：这里提醒大家，如果你要添加索引，你就得给表格多一列(html里要多写一个th，js里columns里要多配置一个data)，不然你直接使用上面的代码，会把你第一列替换掉哦，到时候你就不知道去哪里找了
针对上面代码，我把重点拿出来讲，理解这个代码的含义
columnDefs 这个里面配置的作用是，禁用第一列的搜索和排序。为什么？因为第一列是行号排序还搜索已经没有意义了
order 这个配置项的作用是，设置默认的排序列为第二列。为什么？因为 DT 默认会设置第一列升序排列，既然已经是行号了那就没必要了，我们设置到第二列升序排列
on 为 jQuery 里监听事件的方法，给元素绑定监听事件，这里监听了 order.dt 、search.dt 两个事件，意思是当排序和搜索后，重新生成行号
t.column(0,{selector}).nodes() 这个的作用是获取第一列的 DOM 元素，接着用 each 方法遍历，把行号设置进去。这里 {selector} 为 DT 的高级应用，我下面会说到
draw 最后一个重绘方法，生成序号后，重新绘制。DT 的每个操作，包括排序、过滤、翻页还是自己使用API操作这些操作或者是设置了数据都要再调用 draw 方法才行
通过上面这段基本的代码，在客户端模式下，行号自然就显示出来了
服务器模式下添加行号
服务器模式下添加行号可以从两方面着手：
在服务器把行号生成好，作为数据传回到前端
和上面类似，利用 DT 的 API 生成行号
如果你在使用 DT 之前就已经是封装好了数据，当然最好，直接用就可以了；
如果不是那我推荐第二种方案，下面就看看如果是服务器模式我们怎么实现添加行号
20//添加序号
//不管是排序，还是分页，还是搜索最后都会重画，这里监听draw事件即可
table.on('draw.dt',function() {
table.column(0, {
search: 'applied',
order: 'applied'
}).nodes().each(function(cell, i) {
//i 从0开始，所以这里先加1
//服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息
var page = table.page.info();
//当前第几页，从0开始
var pageno = page.page;
//每页数据
var length = page.length;
//行号等于 页数*每页数据长度+行号
var columnIndex = (i+pageno*length);
cell.innerHTML = columnIndex;
打印出来如下：
"page": 1,
"pages": 6,
"start": 10,
"end": 20,
"length": 10,
"recordsTotal": 57,
"serverSide": true,
"recordsDisplay": 57
和客户端处理方式一点不同，只需要再额外获取翻页信息，即可给每页都加上行号。
看完之后是不是觉得恍然大悟？在服务器模式下添加行号也不是件难事，以后妈妈再也不用担心我不会添加行号了。
selector-modifier 选择器的应用
DT 在文档中提及到的数据类型，方法返回的类型在
有详细的说明
可能大家有看到如下几种写法：
2var table = $('#myTable').DataTable();
table.cell( {focused:true} ).data();
2var table = $('#myTable').DataTable();
table.column( 3, {order:'index'} ).data();
2var table = $('#myTable').DataTable();
table.rows( {page:'current'} ).data();
那么这些 {focused:true},{order:'index'},{page:'current'} selector 都是什么意思呢？在我理解，我认为可以用一句话解释
它就是选择你要操作的数据。
这些都是 selector-modifier 的应用，在 DT 中这是个非常有用的属性，它有如下的值可以选择：
// DataTables core
'current',
// 'current', 'applied', 'index',
'original'
search: 'none',
// 'none',
'applied', 'removed'
// Extension - KeyTable (v2.1+) - cells only
focused: undefined, // true, false, undefined
// Extension - Select (v1.0+)
selected: undefined // true, false, undefined
current（默认） - 表中当前看到的数据
index - 原始数据
applied - current 的别名
original - index 的别名
看过这些解释了，那么前面三段代码大概意思也知道了吧？
第一个是获取有焦点的单元格（当你要获取你在表格中不同行不同列选中的单元格的数据时，你可以这么用）
第二个是获取第四列排序的数据（在添加索引列时，就用到了这个）
第三个是获取当前页的数据（当你在搜索框添加了过滤条件后，你可以用这个方法获取当前页的数据，即过滤后的数据）
现在回过头来看下面这个代码：
4 table.column(0, {
search: 'applied',
order: 'applied'
}).nodes()
如果不加上选择器（selector），在数据很多的情况下就会产生很多重复操作，我们需要做的是对我们看得到的数据设置行号。
如果大家也有小技巧和使用经验，欢迎给我发邮件 thxopen@datatables.club
Please enable JavaScript to view the
百度站内搜索
您的支持，将是我们前进的最大动力……
Themes and templates licensed under the MIT
Based on .
Copyright & 2014 - 2016 datatables.club. Powered by