DataTables: Jak ustawić klasy na komórki wiersza tabeli (ale nie na komórki nagłówków tabeli!)

Question

Mam naprawdę fajny styl na moje stoły.

{linki Niestety nie więcej pracujących}

musiałem dodać sClass tak, że nowe wiersze (dodane przez fnAddData) uzyskać odpowiednie zajęcia.

Niestety to niszczy mój układ, ponieważ te klasy są również dodawane do moich komórek nagłówka tabeli!

{Niestety linki nie więcej pracy}

Jak mogę skonfigurować sClass zastosowanie tylko do komórek TBODY?

Dla wyjaśnienia:

var rolesTable = $('#roles').dataTable({ 
     "aoColumns": [ 
     { "mDataProp": "id", "sClass": "avo-lime-h avo-heading-white" }, 
     { "mDataProp": "name", "sClass": "avo-light" }, 
     { "mDataProp": "module", "sClass": "avo-light" }, 
     { "mDataProp": "description", "sClass": "avo-light" }, 
     { "mDataProp": null, "bSearchable": false, "bSortable": false, 
      "sDefaultContent": '<button type="button" name="add" class="btn"><i class="icon-plus icon-white"></i></button>' }, 
     ], 
    }); // end od dataTable 

W ten sposób, gdy zgłoszę

rolesTable.fnAddData({ 
    "id": 10, 
    "name": "testname", 
    "module": "testmodule", 
    "description": "testdescription" 
}); 

następnie dodaje wiersz wygląda następująco:

<tr> 
    <td class="avo-lime-h avo-heading-white">10</td> 
    <td class="avo-light">testname</td> 
    <td class="avo-light">testmodule</td> 
    <td class="avo-light">testdescription</td> 
    <td></td> 
</tr> 

i to doskonale OK

** ** problem jest, że to ustawienie dodaje również do tych klas:

<thead> 
    <tr> (...) </tr> 
</thead> 

komórek tabeli głowy ... co nie chcę

Answer 1

rozwiązaniem mojego problemu było: użycie fnRowCallback zamiast sClass do ustawienia klas na nowe wiersze.

var rolesTable = $('#roles').dataTable({ 
     "aoColumns": [ 
     { "mDataProp": "id" }, 
     { "mDataProp": "name" }, 
     { "mDataProp": "module" }, 
     { "mDataProp": "description" }, 
     { "mDataProp": null, "bSearchable": false, "bSortable": false, 
      "sDefaultContent": '<button type="button" name="add" class="btn btn-round"><i class="icon-plus icon-white"></i></button>' }, 
     ], 
     "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) { 
      $('td:eq(0)', nRow).addClass("avo-lime-h avo-heading-white"); 
      $('td:eq(1),td:eq(2),td:eq(3)', nRow).addClass("avo-light"); 
     } 
    }); // end od dataTable 

Answer 2

Ustaw wcześniej klasy domyślne.

$.fn.dataTableExt.oStdClasses.sStripeOdd = ''; 

$.fn.dataTableExt.oStdClasses.sStripeEven = ''; 

Dla dalszych odniesień zobaczyć tutaj http://www.datatables.net/styling/custom_classes

Answer 3

Ponieważ używasz tylko sClass zastosować stylizacji do stołu proste rozwiązanie problemu jest zmiana samego CSS do zastosowania tylko do elementów TD.

Old CSS style:

.avo-light { 
    color: blue; 
} 

New style CSS:

td.avo-light { 
    color: blue; 
} 

ten sposób CSS wpłynie tylko komórki, które są zainteresowane w stosowaniu styl mimo sClass zastosowana do th elementy także.

Zdaję sobie sprawę, że to pytanie jest trochę stare, ale uważam, że jest ono znacznie bardziej modułowe niż najlepsze rozwiązanie.

Answer 4

let table = $("#myTable").dataTable(); 
    table.rows().every(function(rowIdx, tableLoop, rowLoop){ 
    $(this.node().cells[0]).addClass('red'); 
    $(this.node().cells[1]).addClass('blue'); 
    } 

Po wyrenderowaniu tabeli należy powtórzyć wszystkie wiersze za pomocą selektora JavaScript każdego wiersza i wprowadzić dowolne zmiany. Odpowiada to problemom związanym z wydajnością podnoszonym przez gamliela w odpowiedzi loostra. DataTables rows().every() documentation