jquery datatable - 應用select.className的值不能按預期工作

Question

我想改變使用我自己的css類的jquery數據表中的選定行的背景顏色，但複選框中的勾號不顯示。

如果我從下面的代碼中刪除className: 'selected-row'，那麼一切正常，但沒有我想要的顏色。

提琴手：https://jsfiddle.net/8f63kmeo/12/

HTML：

<table id="CustomFilterOnTop" class="table table-bordered table-condensed" width="100%"></table> 

JS

var Report4Component = (function() { 
    function Report4Component() { 
     //contorls 
     this.customFilterOnTopControl = "CustomFilterOnTop"; //table id 
     //data table object 
     this.customFilterOnTopGrid = null; 
     //variables 
     this.result = null; 
    } 
    Report4Component.prototype.ShowGrid = function() { 
     var instance = this;  

     //create the datatable object 
     instance.customFilterOnTopGrid = $('#' + instance.customFilterOnTopControl).DataTable({ 
      columns: [ 
        { title: "<input name='SelectOrDeselect' value='1' id='ChkBoxSelectAllOrDeselect' type='checkbox'/>" }, 
       { data: "Description", title: "Desc" }, 
       { data: "Status", title: "Status" }, 
       { data: "Count", title: "Count" } 
      ], 
      "paging": true, 
      scrollCollapse: true, 
      "scrollX": true, 
      scrollY: "300px", 
      deferRender: true, 
      scroller: true, 
      dom: '<"top"Bf<"clear">>rt <"bottom"<"Notes">i<"clear">>', 
      buttons: [ 
       { 
        text: 'Load All', 
        action: function (e, dt, node, config) { 
         instance.ShowData(10000); 
        } 
       } 
      ],    
      columnDefs: [{ 
        orderable: false, 
        className: 'select-checkbox text-center', 
        targets: 0, 
        render: function (data, type, row) { 
         return ''; 
        } 
       }], 
      select: { 
       style: 'multi', 
       selector: 'td:first-child', 
       className: 'selected-row' 
      } 
     });   
    }; 

    Report4Component.prototype.ShowData = function (limit) { 
     if (limit === void 0) { limit = 100; } 
     var instance = this; 
     instance.customFilterOnTopGrid.clear(); //latest api function 
     instance.result = instance.GetData(limit); 
     instance.customFilterOnTopGrid.rows.add(instance.result.RecordList); 
     instance.customFilterOnTopGrid.draw(); 
    }; 
    Report4Component.prototype.GetData = function (limit) { 
     //structure of the response from controller method 
     var resultObj = {}; 
     resultObj.Total = 0; 
     resultObj.RecordList = []; 
     for (var i = 1; i <= limit; i++) { 
      resultObj.Total += i; 
      var record = {}; 
      record.Description = "This is a test description of record " + i; 
      record.Status = ["A", "B", "C", "D"][Math.floor(Math.random() * 4)] + 'name text ' + i; 
      record.Count = i; 
      resultObj.RecordList.push(record); 
     } 
     return resultObj; 
    }; 
    return Report4Component; 
}()); 
$(function() { 
    var report4Component = new Report4Component(); 
    report4Component.ShowGrid(); 
    report4Component.ShowData(); 
}); 
function StopPropagation(evt) { 
    if (evt.stopPropagation !== undefined) { 
     evt.stopPropagation(); 
    } 
    else { 
     evt.cancelBubble = true; 
    } 
} 

問題：

任何建議/幫助將不勝感激。

Answer 1

這是類selected設置複選框打勾等，並通過使用不同的類selected類不再添加。

你可以只添加這兩個類相反，它應該工作

select: { 
    style: 'multi', 
    selector: 'td:first-child', 
    className: 'selected-row selected' 
} 

FIDDLE