[英]How can I sort a data table numerically with jquery
I have a HTML table and the jQuery code to sort the table alphabetically but I can't figure out how to order one of the columns numerically. 我有一个HTML表和jQuery代码,以按字母顺序对表进行排序,但我不知道如何按数字对列之一进行排序。 It is only ordering the numeric column by the first number and not the longer numbers. 它仅按第一个数字而不是较长的数字对数字列进行排序。 So 99 shows up at the top and not 9340. 所以99显示在顶部,而不是9340。
$('thead 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;
//step back up the tree and get the rows with data
//for sorting
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
$rows.sort(function(a, b) {
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');
});
});
function filterDataTable(selector,query){
query = $.trim(query);
query = query.replace(/ /gi, '|');
$(selector).each(function(){
($(this).text().search(new RegExp(query, "i")) < 0 ) ? $(this).hide().removeClass('visibile') : $(this).show().addClass('visible');
});
}
$('tbody tr').addClass('visible');
$("#filter").keyup(function(event){
if(event.keyCode == 27 || $(this).val() == ''){
$(this).val('');
$('tbody tr').removeClass('visible').show().addClass('visible');
}else {
filter('tbody tr', $(this).val());
}
});
$('#filter').show();
I did some googling to see if a question was asked like this but I couldn't find one to fit what I needed exactly. 我进行了一些谷歌搜索,看看是否有人问过这样的问题,但是我找不到一个完全符合我需要的问题。 Most of them told others to use plugins but I don't want to add any plugins. 他们中的大多数告诉其他人使用插件,但是我不想添加任何插件。 I want to have my own sorting code. 我想拥有自己的排序代码。 Thanks. 谢谢。
You can fill your number with 0 to get a sortable string : 您可以用0填充数字以获得可排序的字符串:
var myNumber = 12;
var filler = "00000000000";
var res = filler.substr(0, filler.length - myNumber.toString().length) + myNumber;
Normally, res = 0000000012 通常,res = 0000000012
You can have your number back if needed with parseInt(res,10) 您可以根据需要使用parseInt(res,10)将您的电话号码取回来
This code is working in your snippet. 该代码在您的代码段中有效。
var findSortKey = function($cell) {
var sk = $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
var ik = parseInt(sk,10);
return ik != NaN ? ik : sk;
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.