datatbles修改显示样式(修改行、列背景色，字体，隔行换色)

这里主要介绍两个函数：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": "查询无记录",        "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"    },     ],

原文地址：https://www.cnblogs.com/qinghuaL/p/9842590.html