Le tri des lignes dans la table que l'on clique sur l'en-tête du tableau
J'ai une tâche de tri de la table de lignes dans une table. Les données de la table est un mélange de tout, comme la date, nombre, chaîne de caractères etc etc.
Je suis passé par de nombreux liens où j'ai trouvé certains sont dirigés vers le prêt de la bibliothèque. Qui n'est d'aucune utilité pour moi. Enfin, passer par beaucoup de choses, j'ai fait mon propre en utilisant tous les seins et bits. qui travaille uniquement pour le nombre
C'est le script:
$(document).ready(function () {
//grab all header rows
$('th').each(function (column) {
$(this).addClass('sortable').click(function () {
var findSortKey = function ($cell) {
return $cell.find('.sort-key').text().toUpperCase()+ ' ' + $cell.text().toUpperCase();
};
var sortDirection = $(this).is('.sorted-asc') ? -1 : 1;
var $rows = $(this).parent().parent().parent().find('tbody tr').get();
//loop through all the rows and find
$.each($rows, function (index, row) {
row.sortKey = findSortKey($(row).children('td').eq(column));
});
//compare and sort the rows alphabetically or numerically
$rows.sort(function (a, b) {
if (a.sortKey.indexOf('-') == -1) {
if (parseInt(a.sortKey) < parseInt(b.sortKey)) {
return -sortDirection;
}
if (parseInt(a.sortKey) > parseInt(b.sortKey)) {
return sortDirection;
}
} else {
if (a.sortKey < b.sortKey) {
return -sortDirection;
}
if (a.sortKey > b.sortKey) {
return sortDirection;
}
}
return 0;
});
//add the rows in the correct order to the bottom of the table
$.each($rows, function (index, row) {
$('tbody').append(row);
row.sortKey = null;
});
//identify the column sort order
$('th').removeClass('sorted-asc sorted-desc');
var $sortHead = $('th').filter(':nth-child(' + (column + 1) + ')');
sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');
//identify the column to be sorted by
$('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');
});
});
});
C'est le style du document:
<style>
root
{
display: block;
}
th.sortable
{
color: #666;
cursor: pointer;
text-decoration: underline;
}
th.sortable:hover
{
color: black;
}
th.sorted-asc, th.sorted-desc
{
color: black;
background-color: cadetblue;
}
</style>
Donc ci-dessous est la partie HTML.
<table>
<tbody>
<tr>
<th class="sortable">Name</th>
<th class="sortable">Salary</th>
<th>Extension</th>
<th>Start date</th>
<th>Start date (American)</th>
</tr>
<tr>
<td>Bloggs, Fred</td>
<td>$12000.00</td>
<td>1353</td>
<td>18/08/2003</td>
<td>08/18/2003</td>
</tr>
<tr>
<td>Turvey, Kevin</td>
<td>$191200.00</td>
<td>2342</td>
<td>02/05/1979</td>
<td>05/02/1979</td>
</tr>
<tr>
<td>Mbogo, Arnold</td>
<td>$32010.12</td>
<td>2755</td>
<td>09/08/1998</td>
<td>08/09/1998</td>
</tr>
<tr>
<td>Shakespeare, Bill</td>
<td>$122000.00</td>
<td>3211</td>
<td>12/11/1961</td>
<td>11/12/1961</td>
</tr>
<tr>
<td>Shakespeare, Hamnet</td>
<td>$9000</td>
<td>9005</td>
<td>01/01/2002</td>
<td>01/01/2002</td>
</tr>
<tr>
<td>Fitz, Marvin</td>
<td>$3300</td>
<td>5554</td>
<td>22/05/1995</td>
<td>05/22/1995</td>
</tr>
</tbody>
</table>
Voici un violon si quelqu'un veut fourche jsfiddle.net/jZ6zZ
J'ai utilisé tablesorter.com/docs largement dans le passé. Avez-vous vérifié? Si oui, comment n'est-il pas répondre à vos besoins?
Salut @JonP, Le problème est qu'il utilise la Lib à partir de son site "jquery.tablesorter.js" ce qui n'est pas autorisé. J'ai besoin d'écrire du code ou de l'encadrer par ma propre. Donc, la seule option consiste à modifier mon propre code.
J'ai utilisé tablesorter.com/docs largement dans le passé. Avez-vous vérifié? Si oui, comment n'est-il pas répondre à vos besoins?
Salut @JonP, Le problème est qu'il utilise la Lib à partir de son site "jquery.tablesorter.js" ce qui n'est pas autorisé. J'ai besoin d'écrire du code ou de l'encadrer par ma propre. Donc, la seule option consiste à modifier mon propre code.
OriginalL'auteur teenu | 2012-08-30
Vous devez vous connecter pour publier un commentaire.
Sons comme des devoirs, ce qui est bien, comme vous l'avez montré un peu d'effort vous-même. Si vous n'êtes pas autorisé à tablesorter , de le télécharger, je pense qu'il y a une version de débogage, et de regarder le code. Qui devrait vous aider dans votre quête.
Si c'est les devoirs, n'oubliez pas de sortir dans le monde réel qu'une règle d'or de la programmation est de ne pas ré-inventer la roue. Si il y a un plug-in qui répond à vos besoins, utiliser.
La fixation de Ce que vous avez
Le problème avec votre code comme il est:
Ici, vous êtes toujours à essayer de trouver un nombre entier si
a
ne contient pas de-
. Une mauvaise solution est:Ici est un travail fidle.
Garder à l'esprit que c'est un très approximative de la numératie vérifier, vous aurez probablement besoin d'autres contrôles et les soldes pour d'autres types de données.
OriginalL'auteur Jon P