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

Posted 2021-01-14 qinghual

这里主要介绍两个函数：aoColumnDefs和createdRow

datatables的使用方式非常简单，自行查阅资料，直接上代码：

var t;
t = $("#accountTbl").DataTable({
    searching: true,
    processing: true,
    dom: "<‘row‘<‘col-sm-12‘tr>>
			<‘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"
    }, 
    ],