web-dev-qa-db-fra.com

Le plug-in jquery dataTables peut-il respecter les couleurs des lignes de remplacement après le tri/filtrage?

J'utilise jquery datatables plugin qui semble être un plugin utile pour prendre un tableau HTML normal et ajouter un tri, un filtrage, une pagination, etc.

Un problème que je vois est que lorsque je recherche il ne semble pas mettre à jour les classes de rangées "impaires"/"paires" donc si ma table a 100 rangées mais quand je filtre elle en a 10, il se peut que toutes les 10 soient les mêmes backcolor ou 8 sont la même couleur de fond

Je vois le même problème après avoir trié une colonne également, ce qui pourrait "grouper" un tas de lignes avec la même couleur d'arrière-plan après le tri par colonne.

Existe-t-il de toute façon que le plug-in datatables puisse réappliquer le style même/impair après le filtre, de sorte que, quel que soit le filtre que vous filtrez, il y a toujours une couleur de fond alternée?

jquerysortingjquery-pluginsdatatablesstyling
21
leora

CAUSE

Cette fonctionnalité est disponible par défaut. Très probablement la raison de ce comportement inhabituel:

  • vous écrasez les classes odd et even dans votre CSS, ou 
  • votre code affecte la structure de la table après le filtrage

SOLUTION N ° 1

  1. Style par défaut ou jQuery UI ou Foundation

    Utilisez la classe display pour votre <table> comme indiqué ci-dessous. Voir Options de style par défaut pour une liste de toutes les classes disponibles.

    <table id="example" class="display" cellspacing="0" width="100%">

    Voir ce jsFiddle pour démonstration.

  2. Bootstrap

    Utilisez les classes table table-striped table-bordered pour votre <table> comme indiqué ci-dessous:

    <table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">

    Voir ce jsFiddle pour démonstration.

SOLUTION N ° 2

Si une règle CSS remplace les classes odd et even, vous pouvez indiquer à jQuery DataTables d'utiliser des classes alternatives à la place de stripeClasses option.

$('#example').DataTable( {
  "stripeClasses": [ 'odd-row', 'even-row' ]
} );
21
Gyrocode.com

Pour archiver cela, vous devez utiliser Style de base - pas de classes de styledatatablepour ce faire, supprimez simplement les classes pouvant être datées de tabletag

Après cela, créez vos propres classes pour les lignes odd (par exemple myodd) et even (par exemple myeven).

maintenant, la tâche suivante consiste à appliquer ces classes aux lignes de la table à chaque tirage de la table:

1. Quand des filtres sont appliqués

2. Lorsque la limite d'enregistrements visibles est modifiée, etc.

Pour faire cette donnée fournit rowCallback() vous pouvez utiliser ceci de cette façon: 

 $('#myTabel').dataTable({
        "rowCallback": function( row, data, index ) {
            if(index%2 == 0){
                $(row).removeClass('myodd myeven');
                $(row).addClass('myodd');
            }else{
                $(row).removeClass('myodd myeven');
                 $(row).addClass('myeven');
            }
          }
    });

Notez s'il vous plaît:

Pour éviter !important dans css rule, définissez css rule pour odd, even rangées comme ceci:

table.dataTable tbody tr.myeven{
    background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
    background-color:#bce8f1;
}

DEMO:http://jsfiddle.net/ishandemon/4za80xky/

16
PHP Worm...

Mon ce commentaire est applicable pour comment supprimer ou modifier des classes Jquery Datatable Row

Les Datatables fournissent maintenant un paramètre json optionnel nommé comme suit pour sa 1.10+ documentation . 

donc si vous voulez supprimer complètement les classes paires impaires, utilisez le paramètre suivant lors de l'initialisation des tables.

$('#example').dataTable( {
  "stripeClasses": [] //Empty Array.
} );

donc si vous voulez appliquer une classe CSS personnalisée à chaque ligne de Datatables puis. 

$('#example').dataTable( {
  "stripeClasses": ['yourRowClass']
} );

Si vous voulez appliquer plus d'une classe css (de manière impaire, paire ou séquentielle) de sorte que ces classes se répètent elles-mêmes après chaque nième ligne, utilisez cette 

$('#example').dataTable( {
  "stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
} );

DataTables appliquera chaque classe séquentiellement, en boucle si nécessaire.

2
vibs2006

Je sais que c'est vieux, mais je devais développer la solution ci-dessus. J'autorise l'utilisateur à ajuster la couleur des bandes, donc je devais faire:

rowCallback: (row, data, index) => {
  const stripeColor = this.options.stripeColor;

  if (index % 2 == 0) {
    $(row).removeClass('odd-row even-row');
    $(row).addClass('odd-row');

    if (!!this.options.stripe) {
      $(row).css({ background: 'transparent' })
    }
  } else {

    $(row).removeClass('odd-row even-row');
    $(row).addClass('even-row');

    if (!!this.options.stripe) {
      $(row).css({ background: stripeColor })
    }
  }
},
0
stevenlacerda