最近公司要求以后都使用datatable插件作为项目的表格插件。此帖记录使用中碰见的问题及知识点,方便查询。
官方API文档:https://datatables.net/reference/api/
js初始化
$('#example').DataTable({
data: data,//数据:可以是数组[[],[],[]],数组长度跟列一样即可
searching: false,//是否启用查询功能
paging: false,//是否分页
ordering: true,//是否启用排序
lengthChange:false,//是否显示每页显示条数的下拉框
info: true,//是否显示数据信息(总条数及当前条数之类的信息)
“scrollY”:"400px",//垂直方向滚动条显示高度,超过400px显示滚动条,注意key的双引号
“scrollX”:"500px",//水平方向滚动条显示宽度,注意key的双引号
autoWidth:true,//自动计算宽度
scrollCollapse:false,//使单元格的高度固定。不会随着数据量变少导致高度变得很高
language:{emptyTable:"没有数据哦"},//没有数据是表格中的提示信息
//className用于配置自定义的样式。包括列数据的居左居右
columns: [{"title":"123","width":"110px","className":"my_class"},
{"title":"123","width":"110px","className":"my_class"},
{"title":"123","width":"110px","className":"my_class"}],//列配置
lengthMenu: [ //显示数据的下拉框的设置
[5, 10, 20, -1],
['5', '10', '20', 'all']
],
language:{ //提示语修改
info: "从_START_ 至 _END_ 共_TOTAL_",
lengthMenu: "每页显示 _MENU_ 项结果",
sEmptyTable: "没有数据哦",
paginate: {
previous: "前一页",
next: "后一页",
}
}
});
datatable render的使用
可以即时的处理单元格的数据。
在columns属性中使用,{titile:"name",width:"100px",render:function(data,type,row,meta){
//可以写对当前单元格数据的操作
//我在此处是给金额或者数量进行千位符格式化
}}
参数的介绍如下
禁止单元格中的数据换行
.dataTable th {white-space: nowrap !important;}
.dataTable td {white-space: nowrap}
修改表格默认行高
表格行高默认是35px。可通过class进行修改:
.dataTables_scrollBody td {
padding-top: 3px !important;
padding-bottom:3px !important;
}
修改数据源
$("#table").DataTable().clear().rows.add(data).draw();
DataTable增加多选框列
官方文档:https://datatables.net/extensions/select/
官方案例:https://datatables.net/extensions/select/examples/initialisation/checkbox.html
需要引入额外datatable插件:select插件。引入select.dataTables.min.css和select.dataTables.min.js两个文件
className:'select-checkbox’是必须的。
option设置:
columns:[{ title: "選択", width: "20%", **className: 'select-checkbox'**, }]
//select-checkbox样式名也可不通过columns来设置,通过columnDefs来控制
columnDefs: [{
targets: 0, //列下标,从0开始
orderable: false, //当前列是否允许排序
className: 'select-checkbox' //样式名
}],
select: {
style: 'multi', //多选及单选控制,single为单选
info: false, //是否展示选择信息
selector: 'td:first-child' //哪些列提供点击选择
},
给表格添加事件
//选中时会触发function事件
$("#table").DataTable().on("select", function (e, dt, type, indexes) {//业务逻辑 });
//取消时触发事件挂载
$("#table").DataTable().on("deselect", function (e, dt, type, indexes) {//业务逻辑 });
渲染后效果图
调用datatable自带的search事件
$("#id").DataTable().search("").draw();//清空搜索条件并重置页面
$("#id").DataTable().search(“xxxx”).draw();//从数据中查询xxxx的数据,并渲染
DataTable给行添加id
在option中设置改属性:
rowId: function (rowData) {
return rowData[1]; //rowData是该行数据的集合或json字符串
},
DataTable通过行号获取数据等操作
$("#id").DataTable().row(index).data();
JS判断DataTable是否初始化
官方文档:https://datatables.net/reference/api/%24.fn.dataTable.isDataTable()
//初始化返回true,未初始化返回false
$.fn.dataTable.isDataTable($("#id"));