datatable使用记录

最近公司要求以后都使用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"));