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": "查詢無記錄",
        "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"
    }, 
    ],