2016-11-18 2 views
0

У меня есть таблица HTML и код jQuery для сортировки таблицы по алфавиту, но я не могу понять, как заказать один из столбцов численно. Он только упорядочивает числовой столбец первым числом, а не более длинными числами. Таким образом, 99 появляется в верхней части и не 9340.Как я могу сортировать таблицу данных с помощью jquery

$('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(); 

Я сделал некоторые прибегая к помощи, чтобы увидеть, если был задан вопрос, как это, но я не мог найти один, чтобы соответствовать, что мне нужно точно. Большинство из них сказали другим использовать плагины, но я не хочу добавлять какие-либо плагины. Я хочу иметь свой собственный код сортировки. Благодарю.

+1

Существует плагин для jQuery, называемый [DataTables] (https://datatables.net/). Разработка программного обеспечения связана с повторным использованием кода, и когда разумно использовать или не использовать плагин. В вашем случае рекомендуется использовать плагин. –

+0

[Сортировка массива объектов по значению свойства строки в JavaScript] (http://stackoverflow.com/a/35092754/215552) –

ответ

3

Вы можете заполнить свой номер с 0, чтобы получить Сортируемый строку:

var myNumber = 12; 
var filler = "00000000000"; 
var res = filler.substr(0, filler.length - myNumber.toString().length) + myNumber; 

Обычно разреш = 0000000012

Вы можете иметь свой номер обратно в случае необходимости с ParseInt (Рез, 10)

Этот код работает в вашем фрагменте.

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; 
    }; 
+0

Как это сделать, если я получаю всю информацию, чтобы заполнить таблицу из базы данных ? Просто установите myNumber на пустой номер? – lostInTheTetons

+0

Или просто 'parseInt (res, 10)' Не забудьте radix ... Это число будет анализироваться как '10' вместо' 12', потому что это восьмеричное число (Leading '0'). –

+0

Вы должны преобразовать свой ключ сортировки таким образом. – asfez