后台项目中经常会用到 dataTable 进行表格的智能绘制；总结一下项目中经常用到的 dataTable 设置
1.dataTable 属性设置：
autoWidth: true, // 是否自动计算列宽，默认为 true; 如果要 columnDefs 给不同的列设置不同的宽，则 false 处理----注意，如果设置了 true; 浏览器每次刷 datatable 时候，会分配 td 不同的 width; 容易出现抖动的情况！！！！ searching: false, // 取消搜索查询 ordering: false, //取消排序 bInfo: true, //是否显示页脚信息，datatables 插件左下角显示记录数 bProcessing: true, //datatables 载入数据时，是否显示“进度”提示 bPaginate: true, //是否显示分页 pageLength: 20, //页面展示信息数 bSort: true, //是否启动各个字段的排序功能 aaSorting: [[1,"asc"]], // 默认的排序方式，第2列，升序排序 data: [], // 注意。datatable 的数据源是 array 数组！！
---- 汇总列信息 columns ----
columns 是一个数组。有几列就有几个 data；和每一列一一对应。如果没有直接可取的数据: data: null
columns: [
{"data": "oid"},
{"data":"title"}，
{"data":null}
]，
---- 具体到每一列 columnDefs ----
columnDefs: [
{
targets: 0,
render: function( data, type, row ) {
return data; ----在 columnDefs 里面一定一定要 return ；否则没有数据展示
},
createdCell: function( td, cellData, rowData, row, col ) { ----这一部分是给一列 td 增加属性
$(td).attr("data-title", cellData)
}
}
],
---- 针对行信息 createdRow ----
createdRow: function( row, data, index ) {
$(row).attr("id", data.id);
$(row).data("oid",data.oid);
},
DATAtable---获取直接父节点 tr
var $tr = $(this).closest("tr");
实战中遇到需要针对某一列的所有内容加入 lightGallery 缓动片放映图片/视频的功能
fnDrawCallback: function(oSettings) {
$("#table tbody tr").each(function(){
var lightId = $(this).attr("id");
$("#"+lightId).lightGallery({
thumbnail: true, // 为图库启用缩略图
selector: 'a'
})
})
}
datatable 中，如果根据条件给特定的 td 单元格设置样式
/ createdCell: function( nTd, sData, oData, iRow, iCol ){}
// nTd: 当前单元格DOM 对象； sData: 当前单元格数值 ； oData: 当前行整行的数据对象；iRow:行下标；iCol: 列下标
createdCell: function (nTd,sData,oData,iRow,iCol) {
var font = $(nTd).html()
if(font.indexOf("button") != -1){
$(nTd).addClass("td_error");
}
}
在 "columnDefs:"[{
"targets": 1,
createdCell: function----根据当前获取的 html（）内容值，判断条件
}]