web-dev-qa-db-fra.com

jquery datatables sort par défaut

J'essaie de définir le tri par défaut sur la deuxième colonne de mon jQuery datatable. Il trie par défaut l'index 0. J'utilise la syntaxe "aaSorting": [[ 1, "asc" ]] mais elle met en évidence la colonne que je ne veux pas au chargement initial. Comment définir le type par défaut d'une colonne spécifique sans la mettre en surbrillance comme si aucun tri n'était impliqué et que la colonne d'index 0 était utilisée.

javascriptjquerysortingdatatables
54
Mike Flynn

Il y a plusieurs options:

  1. Juste après l’initialisation de DataTables, supprimez les classes de tri sur l’élément TD du TBODY.

  2. Désactivez les classes de tri à l'aide de http://datatables.net/ref#bSortClasses . Le problème, c'est qu'il désactivera les classes de tri pour les demandes de tri des utilisateurs, ce qui peut être ou ne pas être ce que vous voulez.

  3. Demandez à votre serveur de sortir la table dans l'ordre de tri requis et n'appliquez pas de tri par défaut sur la table (aaSorting:[]).

55
Allan Jardine

Voici le code qui le fait ...

$(document).ready(function()
{
  var oTable = $('#myTable').dataTable();

  // Sort immediately with column 2 (at position 1 in the array (base 0). More could be sorted with additional array elements
  oTable.fnSort( [ [1,'asc'] ] );

  // And to sort another column descending (at position 2 in the array (base 0).
  oTable.fnSort( [ [2,'desc'] ] );
} );

Pour ne pas avoir la colonne en surbrillance, modifiez le CSS comme suit:

table.dataTable tr.odd td.sorting_1 { background-color: transparent; }
table.dataTable tr.even td.sorting_1 { background-color: transparent; }
47
theJerm

Vous pouvez utiliser la fonction fnSort, voir les détails ici:

http://datatables.net/api#fnSort

15
Zeev Novikov

La meilleure option est de désactiver le tri et de simplement alimenter les données avec l'ordre de tri souhaité (depuis la base de données ou une autre source). Essayez d'ajouter ceci à votre "datatable": "bSort": false

3
ealex_ru

J'ai eu ce problème également. J'avais utilisé l'option stateSave et c'est ce qui a causé ce problème.
Supprimez cette option et le problème est résolu.

0
Majid Basirati

utilise this cela fonctionne pour moi: "order": [[1, "ASC"]],

0
Bassem Shahin

Cela a fonctionné pour moi:

       jQuery('#tblPaging').dataTable({
            "sort": true,
            "pageLength": 20
        });
0
Versatile

Il suffit d'inclure le code suivant:

    $(document).ready(function() {
        $('#tableID').DataTable( {
            "order": [[ 3, "desc" ]]
        } );
    } 
);

Article de référence complet avec l'exemple: 

https://datatables.net/examples/basic_init/table_sorting.html

0
Akshay Pethani

Datatables prend en charge les attributs HTML5 data- * pour cette fonctionnalité.

Il prend en charge plusieurs colonnes dans l'ordre de tri (basé sur 0)

<table data-order="[[ 1, 'desc' ], [2, 'asc' ]]">
    <thead>
        <tr>
            <td>First</td>
            <td>Another column</td>
            <td>A third</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>z</td>
            <td>1</td>
            <td>$%^&*</td>
        </tr>
        <tr>
            <td>y</td>
            <td>2</td>
            <td>*$%^&</td>
        </tr>
    </tbody>
</table>

Maintenant, mon jQuery est simplement $('table').DataTables(); et mes deuxième et troisième colonnes sont triées par ordre décroissant/ascendant.

Voici quelques autres attributs de Nice pour le <table> que je réutilise moi-même:

data-page-length="-1" définira la longueur de la page sur Tous (passez 25 pour la longueur de page 25) ...

data-fixed-header="true" ... Devinez 

0
th3byrdm4n