2017-02-07 1 views
2

J'utilise JQuery tablesorter v 2.0. J'ai actuellement il mis en place comme siComment faire en sorte que le trieur de tables jQuery commence toujours par trier sur la dernière colonne?

$("#myTable").tablesorter({ 
    sortList: [[4,0]] 
}); 

mais comment pourrais-je mettre en place l'ordre de tri par défaut d'être toujours la dernière colonne du tableau? La raison pour laquelle le codage en dur d'un nombre n'est peut-être pas idéal est parce que je génère dynamiquement les données de la table et que parfois la table aura cinq colonnes et parfois six.

Répondre

1

Vous pouvez compter le nombre d'en-têtes dans votre tableau et l'utiliser pour obtenir l'index de la dernière colonne. Par exemple:

// Get the number of "th" within the first "tr": 
var columnCount = $('table tr:first').children('th').length; 

$("#myTable").tablesorter({ 
    sortList: [[columnCount - 1, 0]] 
}); 
+0

Ceci est la réponse idéale ... une autre possibilité qui fonctionnera, mais seulement si vous avez une petite table, est d'ajouter '$ ('table thead th: dernière). click(); 'après le code d'initialisation ([demo] (http://jsfiddle.net/eY8uH/1823/)). – Mottie

1

Vous pouvez écrire un plugin jQuery qui compte le nombre d'en-têtes de table pour une table donnée (représentant la durée de la colonne ainsi).

Les exemples de données ci-dessous proviennent de la section Mise en route du docs.

(function($) { 
 
    $.fn.colCount = function() { 
 
    var colCount = 0; 
 
    this.find('tr:first-child td').each(function() { 
 
     colCount += $(this).attr('colspan') ? +$(this).attr('colspan') : 1; 
 
    }); 
 
    return colCount; 
 
    }; 
 
})(jQuery); 
 

 
$(document).ready(function() { 
 
    $('#myTable').tablesorter({ 
 
    sortList: [ 
 
     [$('#myTable').colCount() - 1, 0] 
 
    ], 
 
    theme : 'dropbox' 
 
    }); 
 
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/css/theme.dropbox.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.28.5/js/jquery.tablesorter.widgets.min.js"></script> 
 
<table id="myTable" class="tablesorter"> 
 
    <thead> 
 
    <tr> 
 
     <th>Last Name</th> 
 
     <th>First Name</th> 
 
     <th>Email</th> 
 
     <th>Due</th> 
 
     <th>Web Site</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Smith</td> 
 
     <td>John</td> 
 
     <td>[email protected]</td> 
 
     <td>$50.00</td> 
 
     <td>http://www.jsmith.com</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Bach</td> 
 
     <td>Frank</td> 
 
     <td>[email protected]</td> 
 
     <td>$50.00</td> 
 
     <td>http://www.frank.com</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Doe</td> 
 
     <td>Jason</td> 
 
     <td>[email protected]</td> 
 
     <td>$100.00</td> 
 
     <td>http://www.jdoe.com</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Conway</td> 
 
     <td>Tim</td> 
 
     <td>[email protected]</td> 
 
     <td>$50.00</td> 
 
     <td>http://www.timconway.com</td> 
 
    </tr> 
 
    </tbody> 
 
</table>