jQuery DataTables 使用方法整理

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+'" />' );
    } );
 
    // 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();
        } );
    } );
} );

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 row
    return '<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 it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.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.WeightNo
	urlT = 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 object
        var column = table.column( $(this).attr('data-column') );
 
        // Toggle the visibility
        column.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是td
	var 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>';
}