Datatables学习文档

Datatables学习⽂档Data sources 数据源
DataTables可以从四种基本形式的数据源获取数据：
HTML document (DOM)
Javascript (array / objects)
Ajax sourced data with client-side processing
Ajax sourced data with server-side processing
1、在html表格数据上应⽤DateTables
$(document).ready(function() {
$('#example').dataTable();
} );
2、ajax数据
$(document).ready(function() {
$('#example').dataTable( {
"ajax": '../ajax/data/arrays.txt'
} );
} );
3、js数据，例⼦是⽤⼀个js数组初始化dt数据
var dataSet = [
['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','Win 98+','6','A'],
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
['Gecko','Epiphany 2.20','Gnome','1.8','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'],
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
['Webkit','S60','S60','413','A'],
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
['Presto','Opera for Wii','Wii','-','A'],
['Presto','Nokia N800','N800','-','A'],
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A¹'],
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
['Misc','NetFront 3.1','Embedded devices','-','C'],
['Misc','NetFront 3.4','Embedded devices','-','A'],
['Misc','Dillo 0.8','Embedded devices','-','X'],
['Misc','Links','Text only','-','X'],
['Misc','Lynx','Text only','-','X'],
['Misc','IE Mobile','Windows Mobile 6','-','C'],
['Misc','PSP browser','PSP','-','C'],
['Other browsers','All others','-','-','U']
];
$(document).ready(function() {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
$('#example').dataTable( {
"data": dataSet,
"columns": [
{ "title": "Engine" },
{ "title": "Browser" },
{ "title": "Platform" },
{ "title": "Version", "class": "center" },
{ "title": "Grade", "class": "center" }
]
} );
} );
4、服务器端过程
有很多⽅法可以把数据装进dataTables⾥，如果你正在使⽤⼀个很庞⼤的数据库进⾏⼯作，你可以考虑使⽤dataTables提供的服务器端选项，开启服务器端进程后，所有的分页、搜索、排序⾏为都会被服务器端接⼿，服务器端的sql引擎(类似这么个意思)就可以在⼤量数据上进⾏这些操作(毕竟数据库引擎才是为这项⼯作⽽⽣的)。

如此，表格⾥的每⼀⾏会⽤新的ajax请求来获取它所需的信息。

服务器端过程打开⽅法：把选项serverSide设为true，然后⽤ajax选项提交⼀份ajax数据，例⼦展⽰了⼀个简单的表格，这个例⼦⽤的是服务器端过程。

更复杂的⽤法看后⾯对服务器端过程使⽤的详细介绍。

eg:---------------------
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"serverSide": true,
"ajax": "../server_side/scripts/server_processing.php"
} );
} );
=============下⾯是API：============================================
===================================================================
Add rows 添加⾏
新的⾏可以⽤ row.add⽅法，多⾏数据可以使⽤rows.add⽅法，注意想要看到新加的⾏需要使⽤draw() ⽅法，这个⽅法是dataTables在发⽣变化时调⽤的，很容易使⽤。

下⾯例⼦展⽰了每次单击按钮添加⼀⾏的功能。

$(document).ready(function() {
var t = $('#example').DataTable();
var counter = 1;
$('#addRow').on( 'click', function () {
t.row.add( [
counter +'.1',
counter +'.2',
counter +'.3',
counter +'.4',
counter +'.5'
] ).draw();
counter++;
} );
// Automatically add a first row of data
$('#addRow').click();
} );
规定搜索功能仅对某⼀列有效
dt提供的搜索功能很有⽤，它可以让你迅速搜索表格⾥的信息，但是它的作⽤范围是整个表格的所有数据，有时候我们可能只想在某个单独的列使⽤搜索⽤能，DataTables提供了这个功能，使⽤column().search()⽅法可以指定搜索结果是来⾃哪⼀列的。

列的搜索是可以相互累加的，你可以进⾏多列的搜索，给⽤户提供更多复杂的搜索功能。

This examples shows text elements being used with the column().search()DT method to add input controls in the footer of the table for each column. Note that the *index*:visible option is used for the column selector to ensure that the column()DT method takes into account any hidden columns when selecting the column to act upon.
code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().every( function () {
var that = this;
$( 'input', this.footer() ).on( 'keyup change', function () {
that
.search( this.value )
.draw();
} );
} );
} );
⾼亮显⽰列Highlighting rows and columns
//Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.
//This example shows that in action on DataTable by making use of the cell().index()DT method to get the index of the column that is to be operated on, and then the cells().nodes()DT and column().nodes()DT methods to remove old classes and apply the new highlighted class, respectively.
//－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
var lastIdx = null;
var table = $('#example').DataTable();
$('#example tbody')
.on( 'mouseover', 'td', function () {
var colIdx = table.cell(this).index().column;
if ( colIdx !== lastIdx ) {
$( table.cells().nodes() ).removeClass( 'highlight' );
$( table.column( colIdx ).nodes() ).addClass( 'highlight' );
}
} )
.on( 'mouseleave', function () {
$( table.cells().nodes() ).removeClass( 'highlight' );
} );
} );
Child rows (show extra / detailed information) ⼦⾏（/examples/api/row_details.html）
给⼀个⾏添加下级⼦⾏，⽤于展⽰额外信息。

The example below makes use of the row().childDT methods to firstly check if a row is already displayed, and if so hide it
(row().child.hide()DT), otherwise show it (row().child.show()DT). The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.
/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
'<tr>'+
'<td>Full name:</td>'+
'<td>'++'</td>'+
'</tr>'+
'<tr>'+
'<td>Extension number:</td>'+
'<td>'+d.extn+'</td>'+
'</tr>'+
'<tr>'+
'<td>Extra info:</td>'+
'<td>And any further details here (images etc)...</td>'+
'</tr>'+
'</table>';
}
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "../ajax/data/objects.txt",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "salary" }
],
"order": [[1, 'asc']]
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row( tr );
if ( row.child.isShown() ) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
// Open this row
row.child( format(row.data()) ).show();
tr.addClass('shown');
}
} );
} );
Row selection (multiple rows) （多）⾏的选取，这个有点类似checkbox的功能
rows().data() 通过点击事件添加和移除选中状态。

例⼦：count选中的⾏数
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
$(this).toggleClass('selected');
} );
$('#button').click( function () {
alert( table.rows('.selected').data().length +' row(s) selected' );
} );
} );
Row selection and deletion (single row) ⾏的选取，只能选择⼀⾏，有点类似 input[type=radio]
⽰例展⽰了⼀个修改表格内容的例⼦，每次只有⼀⾏可以被选中，它所作的操作是检测当前的⽬标⾏，如果已经选中则取消选择，如果没有则取消其他⾏的选择并选择当前⾏。

使⽤row().delete()⽅法删除⾏，使⽤draw()⽅法，它的第⼀个参数设为false ，这会重新拉取表格数据⽽保持在当前页不变。

（如果没有这个参数，删除数据后分页会跳回第⼀页）
更多选择⾏并进⾏各种操作的复杂的⽤法看这⾥/extensions/tabletools/
例⼦：
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
Form inputs 表单输⼊
为了实现分页、排序、搜索等功能，DataTables会将不需要展⽰的⾏和单元格从当前DOM移除，这么做提升了性能和兼容性，但是这意味着提交⼀个跨⼏个分页点表单会有点问题，需要我们进⾏⼀些额外的⼯作来获取不在当前页⾯的信息。

DT的$()⽅法可以⽤于获取⽂档的内容⽽不⽤考虑分页、排序带来的问题。

下⾯例⼦展⽰了⽤$()获取表格中所有输⼊数据。

code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
var data = table.$('input, select').serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
data.substr( 0, 120 )+'...'
);
return false;
} );
} );
Index Column 索引列
⾼交互性的表格经常需要⼀个‘counter’来标记每⼀⾏处的位置，这⼀⾏是不⽀持排序的，并且随着数据的动态变化每个索引对应的⾏会动态变化。

例⼦展⽰了DataTables是如何实现这个功能的，第⼀列是counter列，并且搜索和排序时会动态更新。

这是通过监听表格的order和search事件实现的，当检测到这些事件的发⽣时，column().nodes()⽅法被调⽤⽤于获取⽬标列的TH/TD指针，each()⽅法迭代每⼀⾏数据并给他们设置所需的不同内容。

filter和order选项通过当前⽣效的filter被⽤于cloumn()⽅法来获取当前排序的指针。

（翻译的有点问题，看原⽂：
/examples/api/counter_columns.html）
code：－－－－－－－－－－－－－－－－－－－－－－－
$(document).ready(function() {
var t = $('#example').DataTable( {
"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();
} );
动态显⽰和隐藏⾏ Show / hide columns dynamically
例⼦展⽰了怎么使⽤column().visible()⽅法去动态显⽰和隐藏⼀个列。

这个例⼦还设置了滚动，只是为了展⽰滚动在这⾥被⽀持，但它并不是必须的。

另外，⼏个列可以同时被隐藏和显⽰，只需使⽤columns()⽅法选中多列，再⽤columns().visible()⽅法设置可见性状态。

If you are looking for a more complete column visibility interaction controls ColVis for DataTables
provides a complete interface for allowing the user to show and hide columns in the table.
如果你需要更加详细的列显⽰状态交互，DataTables的ColVis （/extensions/colvis/）提供了⼀些完整的接⼝来控制列的显⽰和隐藏。

$(document).ready(function() {
var table = $('#example').DataTable( {
"scrollY": "200px",
"paging": false
} );
$('a.toggle-vis').on( 'click', function (e) {
e.preventDefault();
// Get the column API object
var column = table.column( $(this).attr('data-column') );
// Toggle the visibility
column.visible( ! column.visible() );
} );
} );
Using API in callbacks 在回调⽅法中使⽤api
有时候你也许需要在dt回调⽅法(例如：initComplete, roeCallback 等)⾥⾯使⽤api，但是这有⼀个问题就是对象并没有完全初始化完，所以你⽆法把结果赋给⼀个值并在回调⾥⾯使⽤，但是，所有的dt回调是在dt实例⾥⾯完成的，所以你可以使⽤javascript的特殊变量this来获取，this.api() 会获取⼀个指向表格的api实例。

在这个例⼦中，$() ⽅法被⽤来获取表格中所有的单元格指针，然后给他们添加了⼀些⾏为(例⼦中是⼀个点击事件)，在这边所做的是给表格加了⼀个filter(搜索)，每次点击每个单元格，⾥⾯的值会被⽤作搜索框⾥的参数过滤数据。

其实这也并没有什么，我们可以在在表格加载完毕时给它添加⼀个delegate事件来实现同样的功能，这⾥只是为了展⽰如何在callback⾥⾯使⽤api；
$(document).ready(function() {
$('#example').dataTable( {
"initComplete": function () {
var api = this.api();
api.$('td').click( function () {
api.search( this.innerHTML ).draw();
} );
}
} );
} );
Ajax---------------
从嵌套的json数据获取表格数据列
$(document).ready(function() {
$('#example').dataTable( {
"processing": true,
"ajax": "data/objects_deep.txt",
"columns": [
{ "data": "name" },
{ "data": "hr.position" },
{ "data": "contact.0" },
{ "data": "contact.1" },
{ "data": "hr.start_date" },
{ "data": "hr.salary" }
]
} );
} );
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
{
"data": [
{
"name": "Tiger Nixon",
"hr": {
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25"
},
"contact": [
"Edinburgh",
"5421"
]
},
{
"name": "Garrett Winters",
"hr": {
"position": "Accountant",
"salary": "$170,750",
"start_date": "2011/07/25"
},
"contact": [
"Tokyo",
"8422"
]
}]
}
从嵌套的数组获取数据
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/objects_subarrays.txt",
"columns": [
{ "data": "name[, ]" },
{ "data": "hr.0" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "hr.2" },
{ "data": "hr.1" }
]
} );
} );
{
"name": [
"Nixon",
"Tiger"
],
"hr": [
"System Architect",
"$3,120",
"2011/04/25"
],
"office": "Edinburgh",
"extn": "5421"
}
//Name列是从⼀个包含两个元素的name数组⾥获取的，展⽰时数组中的元素会⾃动被串联起来，name[,]括号⾥⾯的分隔符会被⽤做连接数组元素的连接符。

//下⾯的hr.1 hr.2直接通过数组下标获取单独的数组元素。

在列⾥⽣成额外内容
// columns.renderDT for content that is dynamic (i.e. based upon the row's data)
// columns.defaultContentDT for static content (i.e. simple strings)
$(document).ready(function() {
var table = $('#example').DataTable( {
"ajax": "data/arrays.txt",
"columnDefs": [ {
"targets": -1,
"data": null,
"defaultContent": "<button>Click!</button>"
} ]
} );
$('#example tbody').on( 'click', 'button', function () {
var data = table.row( $(this).parents('tr') ).data();
alert( data[0] +"'s salary is: "+ data[ 5 ] );
} );
} );
// 在每列加了⼀个按钮，并添加了显⽰⾏内信息的点击事件。

//⾃定义数据源参数 Custom data source property
//当从ajax获取数据时，dt会默认读取'data'参数，（它假设默认你的json是这样⼦的 { "data": [...] }）,如果你使⽤的参数不是'data'⽽是别的，可以使⽤dataSrc选项来⾃定义。

// 它有⼏种使⽤⽅法 1、dataSrc:"myDataName" , 传递⼀个字符串，告诉他我们的数据是 { "myDataName": [...] }; 2、dataSrc:'' ,空字符串，说明数据不是对象，是⼀个数组；3、dataSrc: function(json) {}) ,dataSrc为⼀个⽅法，这个⽅法可以返回我们需要的数据形式，⽐如ni可以在这个⽅法⾥读取⼀个xml⽂件并返回我们需要的json格式数据。

$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "data/arrays_custom_prop.txt",
"dataSrc": "demo"
}
} );
} );
-----------------------------------------------
$(document).ready(function() {
$('#example').dataTable( {
"ajax": {
"url": "data/objects_root_array.txt",
"dataSrc": ""
},
"columns": [
{ "data": "name" },
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
} );
//Deferred rendering for speed
//When deferred rendering is enabled, rather than having DataTables create all TR and TD nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant performance increase, since a lot less work is done at initialisation time.
--------------------------------------
$(document).ready(function() {
$('#example').dataTable( {
"ajax": "data/arrays.txt",
"deferRender": true
} );
} );
Custom filtering - range search 范围的筛选
$.fn.dataTable.ext.search
--------------------------------------
/* Custom filtering function which will search data in column four between two values */ $.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
$(document).ready(function() {
var table = $('#example').DataTable();
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup( function() {
table.draw();
} );
} );。