https://blog.csdn.net/lovetea99/article/details/52116945

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’],
…
];

$(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数据，例子展示了一个简单的表格，这个例子用的是服务器端过程。更复杂的用法看后面对服务器端过程使用的详细介绍

$(document).ready(function() {$('#example').dataTable( {"processing": true,"serverSide": true,"ajax": "../server_side/scripts/server_processing.php"} );
} );

API：

1、 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();
} );

2、规定搜索功能仅对某一列有效

dt提供的搜索功能很有用，它可以让你迅速搜索表格里的信息，但是它的作用范围是整个表格的所有数据，有时候我们可能只想在某个单独的列使用搜索用能，DataTables提供了这个功能，使用column().search()方法可以指定搜索结果是来自哪一列的。列的搜索是可以相互累加的，你可以进行多列的搜索，给用户提供更多复杂的搜索功能。

$(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+'" />' );} );// DataTablevar table = $('#example').DataTable();// Apply the searchtable.columns().every( function () {var that = this;$( 'input', this.footer() ).on( 'keyup change', function () {that.search( this.value ).draw();} );} );
} );

3、高亮显示列Highlighting rows and columns

$(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' );} );
} );

4、给一个行添加下级子行，用于展示额外信息。

点击第一列的加号，官网里面的案例。

function format ( d ) {// `d` is the original data object for the rowreturn '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+'<tr>'+'<td>Full name:</td>'+'<td>'+d.name+'</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 itrow.child.hide();tr.removeClass('shown');}else {// Open this rowrow.child( format(row.data()) ).show();tr.addClass('shown');}} );
} );

下面代码是自己创新的，点击某一行直接显示子行，并且点击该行时关闭上述打开的子行。

$('#datatable tbody').on('click', 'tr', function() {var data = table.row(this).data();var _this = $(this);var row = table.row($(this));if(_this.hasClass('selected')){_this.removeClass('selected');}else{table.row('.selected').child.hide();table.$('tr.selected').removeClass('selected');_this.addClass('selected');}// table.row('.selected').remove().draw(false);if (row.child.isShown()) {row.child.hide();_this.removeClass('shown');} else {if(row.child() && row.child().length){row.child.show();}else {format(data,row);}_this.addClass('shown');}
});
function format(data,row){var data = eval( data)var weightNo = data.WeightNourlT = baseurl + '?action=getweightv2&weightno=' + weightNo;var strTab = '<div class="tableDetail">';$.ajax({url: urlT,type: 'get',dataType: 'jsonp',success: function(response) {var dataTab = response.data;for (var i = 0; i < dataTab.length; i++) {strTab += "<span class='detailInfo'>" + dataTab[i].title + "：" +'<span style="font-weight: normal">'+dataTab[i].value + "</span></span>";}strTab += '</div>'row.child(strTab).show()}})
}

5、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' );} );
} );

6、Row selection and deletion (single row) 行的选取，只能选择一行

有点类似 input[type=radio]。上面就应用了该功能

示例展示了一个修改表格内容的例子，每次只有一行可以被选中，它所作的操作是检测当前的目标行，如果已经选中则取消选择，如果没有则取消其他行的选择并选择当前行。使用row().delete()方法删除行，使用draw()方法，它的第一个参数设为false ，这会重新拉取表格数据而保持在当前页不变。（如果没有这个参数，删除数据后分页会跳回第一页）
更多选择行并进行各种操作的复杂的用法看这里http://datatables.net/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 );} );
} );

7、Form inputs 表单输入

为了实现分页、排序、搜索等功能，DataTables会将不需要展示的行和单元格从当前DOM移除，这么做提升了性能和兼容性，但是这意味着提交一个跨几个分页点表单会有点问题，需要我们进行一些额外的工作来获取不在当前页面的信息。
DT的 ( ) 方法可以用于获取文档的内容而不用考虑分页、排序带来的问题。下面例子展示了用 ()方法可以用于获取文档的内容而不用考虑分页、排序带来的问题。下面例子展示了用 ()方法可以用于获取文档的内容而不用考虑分页、排序带来的问题。下面例子展示了用()获取表格中所有输入数据。

$(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;} );
} );

8、Index Column 索引列

高交互性的表格经常需要一个‘counter’来标记每一行处的位置，这一行是不支持排序的，并且随着数据的动态变化每个索引对应的行会动态变化。
例子展示了DataTables是如何实现这个功能的，第一列是counter列，并且搜索和排序时会动态更新。这是通过监听表格的order和search事件实现的，当检测到这些事件的发生时，column().nodes()方法被调用用于获取目标列的TH/TD指针，each()方法迭代每一行数据并给他们设置所需的不同内容。
filter和order选项通过当前生效的filter被用于cloumn()方法来获取当前排序的指针。（翻译的有点问题，看原文：http://datatables.net/examples/api/counter_columns.html）

$(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();
} );

9、动态显示和隐藏行 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 （http://datatables.net/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 objectvar column = table.column( $(this).attr('data-column') );// Toggle the visibilitycolumn.visible( ! column.visible() );} );
} );

10、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

1、从嵌套的json数据获取表格数据列

$(document).ready(function() {$('#example').dataTable( {"processing": true,"ajax": "data/objects_deep.txt","columns": [{data: "",},{data: "WeightTime",className: "center",render: function(data, type, row) {return moment(data).format("YYYY-MM-DD<br/>HH:mm");},},{data: "Weight",className: "number",render: function(data, type, row) {return (data / 1000).toFixed(2)},},],} );
} );

2、对某一列内容过长折叠显示

var remarkShowLength = 9; //默认现实的字符串长度$('#example').dataTable {"processing": true,"ajax": "data/objects_deep.txt","columns": [{data: "WzMC",className: "center",render: function(data, type, row) {var wzmclength = row.WzMC.length + row.WzGGXH.length + 1;if (wzmclength > remarkShowLength) {return getPartialRemarksHtml(row.WzMC + " " + row.WzGGXH); //显示部分信息} else {return row.WzMC + " " + row.WzGGXH; //显示原始全部信息 }}}},],"createdRow": function(row, data, dataIndex) {var wzmcLength = data.WzMC.length + data.WzGGXH.length + 1;if (wzmcLength > remarkShowLength) {$(row).children('td').eq(6).attr('onclick', 'javascript:changeShowRemarks(this);');}$(row).children('td').eq(5).attr('content', data.DFMC);$(row).children('td').eq(9).attr('content', data.Note);$(row).children('td').eq(6).attr('content', data.WzMC + " " + data.WzGGXH);},});function changeShowRemarks(obj) { //obj是tdvar content = $(obj).attr("content");if (content != null && content != '') {if ($(obj).attr("isDetail") == 'true') { //当前显示的是详细备注，切换到显示部分//$(obj).removeAttr('isDetail');//remove也可以$(obj).attr('isDetail', false);$(obj).html(getPartialRemarksHtml(content));} else { //当前显示的是部分备注信息，切换到显示全部$(obj).attr('isDetail', true);$(obj).html(getTotalRemarksHtml(content));}}
}//部分备注信息
function getPartialRemarksHtml(remarks) {return remarks.substr(0, remarkShowLength) + '&nbsp;&nbsp;<a href="javascript:void(0);" ><b>...</b></a>';
}//全部备注信息
function getTotalRemarksHtml(remarks) {return remarks + '&nbsp;&nbsp;<a href="javascript:void(0);" >收起</a>';
}

jQuery DataTables 使用方法整理相关推荐

jQuery - （JQuery datatables api 使用解读）
学习可参考:http://www.guoxk.com/node/jquery-datatables http://yuemeiqing2008-163-com.iteye.com/blog/20069 ...
最全的jquery datatables api 使用详解
https://www.cnblogs.com/amoniyibeizi/p/4548111.html 最全的jquery datatables api 使用详解学习可参考:http://www.g ...
javascript判断图片是否加载完成方法整理
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载 ...
jquery的扩展方法介绍
最近一直在写js,这其中也少不了一位js的主角了jQuery,下面介绍的是jQuery的一些扩展,也就是jQuery的扩展方法,jQuery的扩展方法有两种方式,一种是jQuery本身的扩展方法,另一 ...
JQuery Datatables editor进行增删改查操作(一)
背景 editor作为Datatables的插件之一,功能十分强大,有全行编辑模式.泡泡编辑模式.行内编辑模式.个人觉得,除了泡泡编辑模式外,其他两种模式功能在实际项目中会经常使用到,泡泡模式提供了模 ...
JQuery Datatables 服务端分页简单应用学习
背景介绍最近在一个简单小项目中碰到需要一个前端数据表格控件,在看了网上的资料后最终选择了JQuery Datatables.Datatables功能及其强大,基本满足我的所有需求,在加上其插件Edi ...
jquery datatables 学习笔记
最近项目中用到了BootStrap做后台,在选择表格插件的时候发现了jquery datatables. 功能是很强大,但是网上的例子比较少.在经过一段时间的努力可算是搞出来了. 官网地址:http: ...
jQuery DataTables 插件使用笔记
初始化在页面中 <!DOCTYPE html> <html><head><link rel="stylesheet" type=&quo ...
jQuery笔试题汇总整理--2018
很多人认为属于JQ的时代已经结束了!但是请不要忘记JQ自身还有一项非常牛的优势--兼容性!这是其它框架所不具备的!所以至少目前JQ还是有自己的用武之地的.在这里我将JQ的一些面试题进行了整理,希望对大 ...

jQuery DataTables 使用方法整理