dataTable 实战总结

后台项目中经常会用到 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（）内容值，判断条件
}]