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