Datatable 设置那点事

1. 表格每页行数及是否翻页

pagingType: "full",
paging : true,
pageLength:3,

根据页面情况，按需设置。虽然一般情况是使用翻页功能的，但也确实会遇到数据不使用翻页,而是采用固定表格高度，滚动下滑查看数据的情况。

2. 表格高度

scrollY : "155px"

这个可以不设置的，只设置每页显示几行就可以。但是显示的时候尴尬的事情就是当最后一页不能填满表格的时候，数据下方的info和翻页部分都会紧跟随最后一行数据，导致表格变小，看起来并不美观。

3. 是否启动智能搜索

searching: true,
search: {
    "smart": true
},

这是表格内部的搜索功能，直接过滤表中的大量数据找到自己想查看的那一组。默认是使用智能搜索的，不考虑空格，也不限输入数据长度。但是也确实有用户就是不需要这个功能，那就关掉吧，设置数值为false就可以了。但我的用户要求不能随便在输入框中输入，要限制位数的，再加上下面一段代码，我设置了不可以输入超过10位。

function tableSearchInputListener(tableId){
	$('#'+tableId+'_filter label input').bind('input porpertychange',function(){
		var obj = $('#'+tableId+'_filter label input').val();
		if(obj.length>10){
			obj=obj.substr(0,10);
		}
		$('#'+tableId+'_filter label input').val(obj);
	});
}

4. 列排序

首先需要设置表格排序为true,表格默认使用的排序是按第一列升序排列。如果想自己设置需要加入下面的代码升序或降序随自己心意。要注意第一列的列号为0。

ordering : true,
//升序
order: [[3,'asc'],[4,'desc']],
//降序
order: [[0,'desc'],[1,'desc']],

5. 列宽度

列宽度可以使用datatable自带的列宽度自动调整，但是很多时候自动调整也很迷，只能说用起来基本还是ok的。不满意的时候我们可以自己为某些列设置宽度百分比，如下

autoWidth: false,
columnDefs: [
	{ "width": "6%", "targets": 1 },
	{ "width": "7%", "targets": 11 },
	{ "width": "7%", "targets": 12 },
	{ "width": "7%", "targets": 14 }
],

6. 表格百叶窗背景

不额外设置的时候表格统一使用纯白色作为底色，虽然很简洁但是数据过多的时候还是会混乱。所以为奇数行和偶数行设置不同颜色可以使表格看起来更加清晰。

//奇数行设置背景色
createdRow: function ( row, data, index ) {
    if ( index %2 == 0 ) {
     $('td', row).css("background-color", "#edf0f7");
    }
},

7. 更改翻页按钮

datatable默认的翻页按钮是英文的last, next 按钮，当我们需要更改文字 或者需要按钮样式的时候可以通过language设置。我更改了按钮为通用的前后翻页的文字图标，使用了font-awesome 的文字图标

language:{
		paginate: {
            first: "<span class='fa fa-fast-backward'></span>",
            last: "<span class='fa fa-fast-forward'></span>",
            next: "<span class='fa fa-forward'></span>",
            previous: "<span class='fa fa-backward'></span>"
        },
	},

8. 更改空表格显示的默认文字

如果表格没有数据，datatabel表格会默认显示文字为“No data available in table”， 如果我们需要更改这句文字依然可以使用language设置，如下改为"No Data Available"。

language:{
       	emptyTable: "No Data Available",
	},

9. Datatabel行/列点击触发事件

附上点击列触发事件的代码，点击行就类似了。如下的table是我声明的本个datatable，使用了acctTableSetting参数进行设置，acctTableSetting就是根据以上要求自定义的参数了

var table = $('#acctTable').DataTable(acctTableSetting);
//点击第四列 numb 触发一下方法
$("#acctTable tbody").on("click","tr td:nth-child(4)",function(e){
	var data = table.rows(this).data()[0];
	if(data != "null"){
		var numb = data.numb;
		if(numb !="null"){
	    	htmlChangedTo("customer",numb);
		}else{
			alert("something wrong.");
		}
	}else{
		alert("something wrong");
	}
});

以上代码在测试过程中会有偶发性错误，出现无法找到data.numb 以至于无法触发事件，错误原因至今不明。为了解决此问题，将通过行数据data 取其他列数据改为通过DOM节点取数据，现在使用状态良好，分享代码如下：
a. 在声明每一列数据时，对于希望使用的数据添加类名 "td_numb "

{
	title: "Number",
	data: 'numb ',
	sClass: "td_numb ",
},

b. 使用之前的事件监听方式，改变获取点击行数据的方式.

var code= $(this).parents("tr").find(".td_numb").text().trim();

10. 记使用Datatable遇到的问题

1） Datatable 放置在Modal中， Modal展开后出现表头不对其的情况。

Modal展开需要时间，在Datatable生成后Modal很可能还没能展开，导致表格自动调整宽度失败，通过网上查找资料发现有同道中人遇到了同样的问题，解决方法亲测有效。原理是在Modal展开后自动进行调整。

$(document).on("shown.bs.modal", "#ModalId", function () {
   $.fn.dataTable.tables( { visible: true, api: true } ).columns.adjust();
});

参考博文 https://www.jianshu.com/p/542f9c571e9b