web-dev-qa-db-fra.com

DataTables: comment définir des classes sur des cellules de ligne de tableau (mais pas sur des cellules d'en-tête de tableau!)

j'ai un style vraiment sympa pour mes tables.

{les liens désolés ne fonctionnent plus}

J'ai dû ajouter sClass pour que les nouvelles lignes (ajoutées par fnAddData) obtiennent les bonnes classes.

Malheureusement, cela ruine ma disposition, car ces classes sont également ajoutées à mes cellules d'en-tête de tableau!

{les liens désolés ne fonctionnent plus}

Comment puis-je configurer sClass pour s'appliquer uniquement aux cellules TBODY?

Pour clarifier:

  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

De cette façon quand j'appelle

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

alors la ligne ajoutée ressemble à ceci:

<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>

ET c'est parfaitement OK

** le problème est ** que ce paramètre ajoute également ces classes à:

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

cellules de tête de table ... dont je ne veux pas

javascriptdatatables
17
ioleo

La solution à mon problème était: en utilisant fnRowCallback au lieu de s Class pour définir les classes sur de nouvelles lignes.

  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
30
ioleo

Comme vous utilisez uniquement sClass pour appliquer un style au tableau, la solution simple à votre problème consiste à modifier le CSS lui-même pour ne s'appliquer qu'aux éléments td.

Ancien style CSS:

.avo-light {
    color: blue;
}

Nouveau style CSS:

td.avo-light {
    color: blue;
}

De cette façon, le CSS n'affectera que les cellules auxquelles vous souhaitez appliquer le style, bien que sClass soit également appliqué aux éléments.

Je me rends compte que cette question est un peu ancienne, mais je la trouve nettement plus modulaire que la meilleure solution.

6
nicmoon

Définissez les classes par défaut avant.

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

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

Pour plus de références, voir ici http://www.datatables.net/styling/custom_classes

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

Une fois le tableau rendu, parcourez toutes les lignes avec le sélecteur JavaScript de chaque ligne et apportez les modifications souhaitées. Cela répond aux problèmes de performance soulevés par gamliela dans la réponse de loostr. lignes DataTables (). Chaque () documentation

2
cs01