jQuery table sort

Question

J'ai un tableau HTML très simple avec 4 colonnes :

Facility Name, Phone #, City, Specialty

Je veux que l'utilisateur puisse trier par Nom de l'établissement et Ville seulement.

Comment puis-je coder cela en utilisant jQuery ?

Answer 1

J'ai trouvé ceci, et j'ai pensé que je pourrais y mettre mon grain de sel. Cliquez sur les en-têtes des colonnes pour les trier par ordre croissant, et à nouveau pour les trier par ordre décroissant.

• Fonctionne dans Chrome, Firefox, Opera ET IE(8)
• Utilise uniquement JQuery

• Effectue un tri alpha et numérique - ascendant et descendant

  $('th').click(function(){ var table = $(this).parents('table').eq(0) var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index())) this.asc = !this.asc if (!this.asc){rows = rows.reverse()} for (var i = 0; i < rows.length; i++){table.append(rows[i])} }) function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index) return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB) } } function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

  table, th, td { border: 1px solid black; } th { cursor: pointer; }

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr><th>Country</th><th>Date</th><th>Size</th></tr> <tr><td>France</td><td>2001-01-01</td><td>25</td></tr> <tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr> <tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr> <tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr> <tr><td>USA</td><td></td><td>-6</td></tr> </table>

** Mise à jour : 2018

• Pour ceux qui sont intéressés, je fournis une Solution ES6 Plain Javascript ici .

Answer 2

Si vous souhaitez éviter toutes les cloches et les sifflets, je vous suggère de ce simple sortElements plugin . Utilisation :

var table = $('table');

$('.sortable th')
    .wrapInner('<span title="sort this column"/>')
    .each(function(){

        var th = $(this),
            thIndex = th.index(),
            inverse = false;

        th.click(function(){

            table.find('td').filter(function(){

                return $(this).index() === thIndex;

            }).sortElements(function(a, b){

                if( $.text([a]) == $.text([b]) )
                    return 0;

                return $.text([a]) > $.text([b]) ?
                    inverse ? -1 : 1
                    : inverse ? 1 : -1;

            }, function(){

                // parentNode is the element we want to move
                return this.parentNode; 

            });

            inverse = !inverse;

        });

    });

Et une démo. (cliquez sur les en-têtes de colonne "ville" et "établissement" pour les trier)

Answer 3

La plus simple que j'ai utilisée est de loin la suivante : http://datatables.net/

C'est étonnamment simple... assurez-vous simplement que si vous suivez la voie du remplacement du DOM (c'est-à-dire que vous construisez une table et laissez DataTables la reformater), assurez-vous de formater votre table avec <thead> et <tbody> ou ça ne marchera pas. C'est à peu près le seul problème.

Il est également possible de prendre en charge AJAX, etc. Comme pour tous les bons morceaux de code, il est également TRÈS facile de tout désactiver. Vous seriez surpris de ce que vous pouvez utiliser, cependant. J'ai commencé avec une DataTable "nue" qui ne triait qu'un seul champ, puis j'ai réalisé que certaines des fonctionnalités étaient vraiment pertinentes pour ce que je fais. Les clients adorent les nouvelles fonctionnalités.

Points bonus pour DataTables pour le support complet de ThemeRoller....

J'ai également eu de la chance avec tablesorter, mais il n'est pas aussi facile, pas aussi bien documenté, et n'a que des fonctionnalités correctes.

Answer 4

Nous venons de commencer à utiliser cet outil astucieux : https://plugins.jquery.com/tablesorter/

Il existe une vidéo sur son utilisation à l'adresse suivante http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx

    $('#tableRoster').tablesorter({
        headers: {
            0: { sorter: false },
            4: { sorter: false }
        }
    });

Avec un simple tableau

<table id="tableRoster">
        <thead> 
                  <tr>
                    <th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
                    <th>User</th>
                    <th>Verified</th>
                    <th>Recently Accessed</th>
                    <th>&nbsp;</th>
                  </tr>
        </thead>

Answer 5

Mon vote - TinyTable