Наверняка вы уже проверили наши Топ 7 лучших плагинов jQuery и JavaScript для сортировки таблиц, и подумал, как легко и быстро вы можете сортировать таблицы с помощью сторонних плагинов. Использование плагина дает преимущества и преимущество в том, что вам не нужно путаться с пользовательским кодом для заказа простой таблицы. Библиотеки уже решают такие проблемы, как обработка дат и т. Д.
Однако в некоторых случаях вы не можете просто использовать плагин для этой задачи, потому что либо вам не разрешено, либо вы просто хотите узнать, как это сделать самостоятельно. В этой статье мы расскажем вам о двух способах сортировки таблиц в алфавитном порядке, используя обычный JavaScript или jQuery, если вы предпочитаете.
Заметка
Обе реализации ожидают (и чьи заголовки с) и структура, поэтому убедитесь, что если вы используете любой из упомянутых методов, это условие выполнено. Кроме того, оба метода работают одинаково, th элементы вашей таблицы станут активными, и при нажатии на них таблица будет отсортирована в соответствии с ее текущим состоянием (по возрастанию или по убыванию).
Сортировка столов с помощью VanillaJS
Если вы все равно хотите отсортировать таблицу без плагина, вам придется написать собственный код для нее. Следующий объект JavaScript (в стиле класса) предлагает makeSortable метод, который ожидает в качестве первого аргумента элемент DOM таблицы, в частности:
/**
* Modified and more readable version of the answer by Paul S. to sort a table with ASC and DESC order
* with the and structure easily.
*
* https://stackoverflow.com/a/14268260/4241030
*/
var TableSorter = {
makeSortable: function(table){
// Store context of this in the object
var _this = this;
var th = table.tHead, i;
th && (th = th.rows[0]) && (th = th.cells);
if (th){
i = th.length;
}else{
return; // if no `` then do nothing
}
// Loop through every inside the header
while (--i >= 0) (function (i) {
var dir = 1;
// Append click listener to sort
th[i].addEventListener('click', function () {
_this._sort(table, i, (dir = 1 - dir));
});
}(i));
},
_sort: function (table, col, reverse) {
var tb = table.tBodies[0], // use `` to ignore `` and `` rows
tr = Array.prototype.slice.call(tb.rows, 0), // put rows into array
i;
reverse = -((+reverse) || -1);
// Sort rows
tr = tr.sort(function (a, b) {
// `-1 *` if want opposite order
return reverse * (
// Using `.textContent.trim()` for test
a.cells[col].textContent.trim().localeCompare(
b.cells[col].textContent.trim()
)
);
});
for(i = 0; i < tr.length; ++i){
// Append rows in new order
tb.appendChild(tr[i]);
}
}
};Метод можно использовать, как показано в следующем примере:
window.onload = function(){
TableSorter.makeSortable(document.getElementById("myTable"));
};Сортировка таблиц с помощью jQuery
С jQuery процесс почти такой же, но мы можем использовать некоторые утилиты, такие как метод find, чтобы найти элементы th внутри ваших таблиц. Затем мы прикрепим слушатель к каждому из этих элементов и добавим сортировщик, который использует localeCompare, и утилиту isNumber из jQuery:
/**
* mini jQuery plugin based on the answer by Nick Grealy
*
* https://stackoverflow.com/a/19947532/4241030
*/
(function($){
$.fn.extend({
makeSortable: function(){
var MyTable = this;
var getCellValue = function (row, index){
return $(row).children('td').eq(index).text();
};
MyTable.find('th').click(function(){
var table = $(this).parents('table').eq(0);
// Sort by the given filter
var rows = table.find('tr:gt(0)').toArray().sort(function(a, b) {
var index = $(this).index();
var valA = getCellValue(a, index), valB = getCellValue(b, index);
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.localeCompare(valB);
});
this.asc = !this.asc;
if (!this.asc){
rows = rows.reverse();
}
for (var i = 0; i < rows.length; i++){
table.append(rows[i]);
}
});
}
});
})(jQuery);Может использоваться как:
$(function(){
$("#myTable").makeSortable();
});После 2 приведенных примеров для сортировки таблиц с помощью jQuery или VanillaJS вы наверняка видели, как localeCompare используется в обоих из них. Метод localeCompare () возвращает число, указывающее, идет ли строка ссылки до или после или совпадает с заданной строкой в порядке сортировки. Эта функция находится в прототипе String движка JavaScript.
