jquery sort table without plugin
Question
Hello i'm using jquery to sort a table on click on the "th" tag, my code working well but only with numbers and words, but not with the date, is there anything wrong in the code :
<table>
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>b</td>
<td>13/03/1998</td>
</tr>
<tr>
<td>3</td>
<td>a</td>
<td>02/01/2005</td>
</tr>
<tr>
<td>2</td>
<td>c</td>
<td>10/12/2022</td>
</tr>
</tbody>
</table>
and the js :
$(document).on('click', 'th', 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();
}
table.children('tbody').empty().html(rows);
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index),
valB = getCellValue(b, index);
return $.isNumeric(valA) && $.isNumeric(valB) ?
valA - valB : valA.localeCompare(valB);
};
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text();
}
thank you in advance
1 answers
solution1
0 ACCPTED 2022-05-25 14:50:43
As currently written, your code is treating each date as a string, and sorting it alphanumerically instead of chronologically.
Assuming your dates all use the format dd/mm/yyyy , then you can re-arrange the date strings into a numeric format yyyymmdd , which is suitable for sorting:
function reformatDate(val) {
return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2);
}
You can use this function in your comparer() function, by checking the column index:
if ( index === 2 ) {
valA = reformatDate(valA);
valB = reformatDate(valB);
console.log(valA, valB);
}
A demo:
$(document).on('click', 'th', 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(); } table.children('tbody').empty().html(rows); }); function comparer(index) { return function(a, b) { var valA = getCellValue(a, index), valB = getCellValue(b, index); if ( index === 2 ) { valA = reformatDate(valA); valB = reformatDate(valB); //console.log(valA, valB); } return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB); }; } function getCellValue(row, index) { return $(row).children('td').eq(index).text(); } function reformatDate(val) { return val.substring(6, 10) + val.substring(3, 5) + val.substring(0, 2); }
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <style> </style> </head> <body> <table> <thead> <tr> <th>head1</th> <th>head2</th> <th>head3</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>b</td> <td>13/03/1998</td> </tr> <tr> <td>3</td> <td>a</td> <td>02/01/2005</td> </tr> <tr> <td>2</td> <td>c</td> <td>10/12/2022</td> </tr> </tbody> </table> </body> </html>
This approach takes your constraint " without plugin " to mean without any additional plugins except for jQuery, which is implied by the code in your question.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.