web-dev-qa-db-fra.com

Donner des classes personnalisées à chaque TD pour le style - Datatables & jQuery

J'utilise datatables pour afficher des données côté serveur dans des tableaux.

Je ne peux pas cibler et styler des cellules individuelles (<TD>) bien que. Je cherche un peu et trouve que cela pourrait être possible avec:

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
    ....
}

... mais je ne suis pas tout à fait sûr de savoir comment parce que j'ai quelques tables et que toutes ne comportent pas le même nombre de colonnes et de lignes. Je veux donner une classe commune à tous les TDs d'une 'colonne'.

javascriptjquerydatatableshtml-table
51
3zzy

Vous pouvez utiliser le paramètre sClass dans la définition des colonnes. Par exemple, si vous avez 3 colonnes et souhaitez passer une classe personnalisée pour les deuxième et troisième colonnes, vous pouvez:

"aoColumns": [
    null,
    { "sWidth": "95px", "sClass": "datatables_action" },
    { "sWidth": "45px", "sClass": "datatables_action" }
]

Vous pouvez vérifier documentation des tables de données

45
Lukasz Koziara

Vous pouvez utiliser columnDefs pour définir des classes pour chaque colonne.

Exemple dans coffeescript:

$('table').dataTable(
  columnDefs: [
    {
      targets: -1 # targets last column, use 0 for first column
      className: 'last-column'
    }
  ]
);

Ceci utilise la nouvelle API 1.10+.

12
jmarceli

Pour ceux qui ont trouvé cette question lors de la recherche de fnRowCallback et veulent ajouter un style basé sur le contenu de la cellule plutôt que d'utiliser des classes CSS statiques, l'utilisation de fnRowCallback fera l'affaire:

oTable = $('#matrix').dataTable({
  ...
  "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
    for (var i in aData)  {

      // Check if a cell contains data in the following format:
      // '[state] content'
      if (aData[i].substring(0,1)=='[') {

        // remove the state part from the content and use the given state as CSS class
        var stateName= aData[i].substring(1,aData[i].indexOf(']'));
        var content= aData[i].substring(aData[i].indexOf(']')+1);
        $('td:eq('+i+')', nRow).html(content).addClass(stateName);
      }
    }
  }
});

J'espère que cela pourra être utile à un futur visiteur :-)

12
SaschaM78

Voici comment faire en utilisant createdCell, en utilisant syntaxe DataTables 1.10+ . L'avantage de cette approche est que vous pouvez attribuer un style conditionnel aux cellules.

"columnDefs": [
{
        "targets": [16],
        "createdCell": function(td, cellData, rowData, row, col) {
            switch(cellData) {
            case "Pending":
                $(td).addClass('pending');
                break;
            case "Rejected":
                $(td).addClass('rejected');
                break;
            case "Approved":
                $(td).addClass('approved');
                break;
            case "SAP":
                $(td).addClass('sap');
                break;
            case "Reconciled":
                $(td).addClass('reconciled');
                break;
            }
        }
    }
],
9
devlin carnate

Si vous souhaitez cibler la ligne ou une cellule individuelle dans un rappel:

var table = $('#order-history-table').DataTable(
    {
        "ajax": url,
        "pageLength": 20,
        "createdRow": function( row, data, dataIndex ) {

            // Add a class to the cell in the second column
            $(row).children(':nth-child(2)').addClass('text-justify');

            // Add a class to the row
            $(row).addClass('important');
        }
    }
);

Je ne pouvais pas faire fonctionner le paramètre 'createdCells', donc je devais le faire par la ligne.

7
omarjebari
var table = $('#order-history-table').DataTable(
    {
        "ajax": url,
        "pageLength": 20,
        "createdRow": function( row, data, dataIndex ) {
            // Add a class to the cell in the second column
            $(row).children(':nth-child(2)').addClass('text-justify');
            // Add a class to the row
            $(row).addClass('important');
        }
    }
);
0
Karthik