web-dev-qa-db-fra.com

jQuery DataTables: comment trier par colonne spécifique?

Voici la page:

http://csuvscu.com/

J'ai besoin de trier par la colonne Date, en ce moment, il doit lire le 6 novembre, le 5 novembre et enfin le 7 octobre.

Comment puis-je faire cela?

jquerysortingdatatablescolumnsorting
16
Snow_Mac

Votre code actuel:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

Ce que vous pourriez faire:

oTable = $('table').dataTable({
    // display everything
    "iDisplayLength": -1
});

oTable.fnSort( [ [0,'desc'] ] ); // Sort by first column descending

Mais comme indiqué dans le commentaire ci-dessous, cela peut être une méthode plus propre:

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 0, "desc" ]] // Sort by first column descending
});
51
shaheenery

DataTables utilise l'ordre alphabétique comme méthode de tri par défaut. C'est en fait ce qui se passe ici.

Il existe deux solutions:

  • Définissez votre propre méthode de tri des dates
  • Triez le tableau à l'aide d'une colonne masquée contenant la date dans l'horodatage Unix (secondes écoulées depuis le 1er janvier 1970).

Si vous souhaitez que vos utilisateurs puissent trier eux-mêmes la colonne, vous pouvez utiliser la première solution.

--------------- Première solution:

Nous devons dire au plugin DataTable quoi faire avec nos colonnes. Vous devrez utiliser la propriété "aoColumns":

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aoColumns":[
        {"sType": "shaheenery-date"},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true}
    ]
});

Définissez ensuite les méthodes de tri "shaheenery-date-asc" et "shaheenery-date-desc". Vous avez également besoin d'une fonction "getDate" qui traduit la date au format numérique:

function getDate(a){
        // This is an example:
        var a = "Sunday November 6, 2011";
        // your code =)
        // ...
        // ...
        // You should output the result as YYYYMMDD
        // With :
        //   - YYYY : Year
        //   - MM : Month
        //   - DD : Day
        //
        // Here the result would be:
        var x = 20111106
        return x;
}

jQuery.fn.dataTableExt.oSort['shaheenery-date-asc'] = function(a, b) {      
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? -1 : ((x > y) ? 1 : 0));
        return z;
};

jQuery.fn.dataTableExt.oSort['shaheenery-date-desc'] = function(a, b) {
        var x = getDate(a);
        var y = getDate(b);
        var z = ((x < y) ? 1 : ((x > y) ? -1 : 0));
        return z;
    };

--------------- Deuxième solution:

Nous allons également utiliser la propriété "aoColumns". Cette fois, nous demandons à DataTable de masquer la dernière colonne qui contiendra la date dans l'horodatage Unix. Nous devons également définir cette colonne comme celle par défaut pour le tri avec "aaSorting":

$('table').dataTable({
    // display everything
    "iDisplayLength": -1,
    "aaSorting": [[ 5, "desc" ]],
    "aoColumns":[
        {"bSortable": false},
        {"bSortable": true},
        {"bSortable": true},
        {"bSortable": true},
        {"bVisible": false}
    ]
});
13
paic_citron
oTable = $('#DataTables_Table_0').dataTable({   //table id -->DataTables_Table_0

    iVote: -1,  //field name 
    "bRetrieve":true

});

 oTable.fnSort( [ [1,'desc'] ] );   // Sort by second column descending
2
Divyesh

Avec la dernière version des tableaux de données, vous pouvez trier par index de colonne

var data_table = $('#data-table').DataTable();
data_table.order( [7,'desc'] ).draw();

J'espère que cela t'aides.

1
Darren Hall
 $ ('# id'). dataTable ({
 "bSort": true, 
 "aoColumnDefs": 
 'bSortable': false, 
 ' aTargets ': [1]} 
 
});
1
Andrés Rosales Campos

Les réponses existantes utilisent la syntaxe DataTables héritée. Les versions 1.10+ doivent utiliser la syntaxe suivante:

$('table').dataTable({
    "pageLength": -1,  //display all records
    "order": [[ 0, "desc" ]] // Sort by first column descending
});

Référence:

1
devlin carnate