jQuery plugin tablesorter secondaire "caché" de tri
j'utilise jQuery plugin tablesorter et j'ai une colonne qui contient le nom du mois et de l'année comme ceci
April, 1975
January, 2001
je voudrais trier cette colonne comme si c'était une colonne de date. Comme je l'ai compris, il est possible de trier la colonne avec une autre valeur "cachée", mais je n'arrive pas à trouver la documentation pour cette fonctionnalité. Aucune aide là-bas?
mise à Jour
cette fourchette http://mottie.github.com/tablesorter/docs/index.html du tablesorter avait juste ce dont j'avais besoin; la capacité de stocker la valeur pour trier dans un attribut, a fonctionné vraiment grand.
6 réponses
j'ai une fourche de tablesorter qui permet d'écrire un analyseur syntaxique qui peut extraire les attributs de données à partir de la cellule du tableau ainsi que d'assigner des textExtraction pour chaque colonne.
$(function(){
$.tablesorter.addParser({
// set a unique id
id: 'myParser',
is: function(s) {
// return false so this parser is not auto detected
return false;
},
format: function(s, table, cell, cellIndex) {
// get data attributes from $(cell).attr('data-something');
// check specific column using cellIndex
return $(cell).attr('data-something');
},
// set type, either numeric or text
type: 'text'
});
$('table').tablesorter({
headers : {
0 : { sorter: 'myParser' }
}
});
});
juste en utilisant la fonction textExtraction. Définissez la valeur de tri des données sur votre TDs. Par défaut, le texte normal s'il n'est pas présent.
$(".sort-table").tablesorter({
textExtraction: function(node) {
var attr = $(node).attr('data-sort-value');
if (typeof attr !== 'undefined' && attr !== false) {
return attr;
}
return $(node).text();
}
});
excusez-vous d'avoir répondu à une vieille question, mais c'est maintenant un standard FEATURE of tablesorter, même si elle n'est pas documentée pour une raison quelconque. Si vous ouvrez le fichier https://github.com/christianbach/tablesorter/blob/master/jquery.tablesorter.js et regardez la ligne # 307 vous verrez qu'elle supporte l'attribut "data-sort-value".
Utilisation:
<td data-sort-value="42">Answer to the question</td>
C'est un peu un hack (OK, c'est un total de hack), mais si vous définissez l'analyseur pour la colonne "texte", et avant de fixer votre jolie sortie avec la chaîne que vous voulez vraiment à trier dans un caché span il va trier correctement.
Vous pouvez régler l'analyseur sur une colonne avec le headers option, par exemple pour définir l'analyseur sur les première et deuxième colonnes de "texte", vous définissez les éléments suivants:
headers: {0: {sorter: 'text'}, : {sorter: 'text'}
pour faire ce truc avec les dates, vous pouvez utiliser le format de date ISO8601 qui sortes lexicalement. JS's Date les objets peuvent générer des chaînes de date ISO8601 via le toISOString() fonction.
compte tenu de la CSS:
span.hidden{
display:none;
}
Un échantillon des cellules dans le tableau devrait ressembler à ceci:
<td><span class="hidden">2015-04-18T23:48:33</span>19 April 2015</td>
pas le plus beau code du monde, mais il fonctionne.
Vous devez ecrire votre propre analyseur. Votre analyseur pourrait ressembler à ça:
var months = {'January':1,'February':2, ...};
$.tablesorter.addParser({
id: 'myDate',
is: function(s) { return false; },
format: function(s) {
var x = s.split(', ');
return x[1]+'-'+months[x[2]];
},
type: 'numeric'
});
non testé, mais idée générale.
j'utilise
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.29.0/js/jquery.tablesorter.min.js"></script>
Travail avec des données de texte
<td data-text="42">Answer to the question</td>
Ne Fonctionne Pas avec le data-sort-value
<td data-sort-value="42">Answer to the question</td>