DataTables使用技巧小记

reload回调

var table = $('#example').DataTable({
	//表格初始化
});

table.ajax.reload(function (json) {
    //json是服务端返回的数据
});

使用场景：重新加载表格的同时需要显示一些额外的信息，比如分类统计信息。

初始化回调

var table = $('#example').DataTable({
	//表格初始化
	initComplete: function() {
		//表格初始化完成后执行，reload不执行
	}
});

使用场景：表格中使用了某些需要初始化的js组件，可以在此回调中初始化。

自定义AJAX请求参数

var table = $('#example').DataTable({
	ajax: {
		url: 'xxx',
		data: function (d) {
			d.xxx = xxx
		}
	},
	//表格初始化
});

如果需要在reload是修改请求参数，可以给一个函数来获取参数。

var table = $('#example').DataTable({
	ajax: {
		url: 'xxx',
		data: function (d) {
			d.xxx = getXXX()
		}
	},
	//表格初始化
});

var xxx = 'xxx';
var getXXX = function() {
	return xxx; //reload之前改掉xxx
}

使用场景：表格需要根据参数加载不同的内容。

高亮单元格

render函数用来自定义显示内容，createdCell函数用来自定义单元格样式。

var table = $('#example').DataTable({
	aoColumns: [
	     {bSortable: false, mDataProp: "fieldName", createdCell: function (td, cellData, rowData, row, col) {
	         td.bgColor='#FFE5B4'; //设置单元格背景色
	         $(td).css('color', 'red'); //设置文字颜色
	         //cellData:单元格数据
	         //rowData：行数据
	         //row:行号
	         //col:列号
	     }}
     ]
})

使用场景：利用表格做数据对比，需要高亮显示不同的地方。

设置排序列位置

DataTable默认第一列是排序列，有一个这样的小图标：

排序列的位置可以通过order字段调整。

var table = $('#example').DataTable({
	order: [[ 1, 'asc' ]],//移到第二列
})

---

附

jQuery在点击事件中获取被点击对象。

$("a").click(function() {
    alert($(this).text());
    //$(this) 就是被点击的a标签
});