datatables修改显⽰样式（修改⾏、列背景⾊，字体，隔⾏换⾊）
这⾥主要介绍两个函数：aoColumnDefs和createdRow
datatables的使⽤⽅式⾮常简单，⾃⾏查阅资料，直接上代码：
var t;
t = $("#accountTbl").DataTable({
searching: true,
processing: true,
dom: "<'row'<'col-sm-12'tr>>\n\t\t\t<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7 dataTables_pager'lp>>",
language: {
"info": "显⽰从 _START_ 到 _END_ 总计 _TOTAL_ 条记录",
"infoEmpty": "显⽰从 0 到 0 of 0 条记录",
"lengthMenu": "每页显⽰ _MENU_ 条记录",
"emptyTable": "查询⽆记录",weight代表什么意思
"loadingRecords": "加载中...",
"zeroRecords": "查询⽆记录",
},
//  aoColumnDefs:[
// {"sClass":"col_class","aTargets":[0]},{"sClass":"cos_class","aTargets":[1]}],
createdRow: function ( row, data, index ) {
if ( index %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
},
buttons: ["print", "copyHtml5", "excelHtml5", "csvHtml5", "pdfHtml5"],
select: true,
rowId: 'id',
serverSide: true,
ajax: {
"url": '',
},
columns: [{
data: "id",
"orderable": true,"width":"50px"
},
],
})
1、aoColumnDefs：
  这个函数是修改列显⽰的，{"sClass":"col_class","aTargets":[0]}，"aTargets"这个参数代表，从左到右第⼀列，第⼆列就是[1]，这个col_class需要⾃⼰在
前端定义。
  <style>
.col_class{
color: #ff7e29;
}
.cos_class{
color: #2a1cf6;
}
</style>
2、createdRow：
  这个函数是修改⾏显⽰的，createdRow: function ( row, data, index ) {}，三个参数row代表⾏，data表⽰你传⼊的字段，意思就是说你可以根据字段的内容进⾏过滤显⽰，index是⾏的索引值。
隔⾏换⾊显⽰：
if ( index %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
根据id显⽰：
if ( data['id] %2 == 0 ) {
$('td', row).css('font-weight',"bold").css("color","#c43ff6");
}
ps：如果想要修改td标签的长度，可以在columns中进⾏限制的。
columns: [{
data: "id",
"orderable": true,"width":"50px"
},
],

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。