в jQuery сортировка таблицы
У меня есть очень простая таблица HTML с 4 столбцами:
Facility Name, Phone #, City, Specialty
Я хочу, чтобы пользователь мог Сортировать по названию объекта и города.
Как я могу кодировать это с помощью jQuery?
13 ответов
Если вы хотите избежать всех колоколов и свистков, то могу я предложить это просто sortElements плагин. Использование:
var table = $('table');
$('.sortable th')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});
и демо. (щелкните заголовки столбцов" город "и" объект " для сортировки)
я наткнулся на это и подумал, что я брошу свои 2 цента. Нажмите на заголовки столбцов для сортировки по возрастанию и снова для сортировки по убыванию.
- работает в Chrome, Firefox, Opera и IE (8)
- использует только JQuery
- делает альфа-и числовую сортировку-по возрастанию и убыванию
$('th').click(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()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>** обновление: 2018
- для тех, кто заинтересован, я предоставил ES6 простое решение Javascript здесь.
безусловно, самый простой, который я использовал:http://datatables.net/
удивительно простым...просто убедитесь, что если вы идете по маршруту замены DOM (т. е. создаете таблицу и позволяете DataTables переформатировать ее), то обязательно отформатируйте таблицу с помощью <thead> и <tbody> или это не сработает. Только вот про Гоча.
существует также поддержка AJAX и т. д. Как и со всеми действительно хорошими частями кода, очень легко отключить все это. Ты будешь удивлен что вы могли бы использовать, хотя. Я начал с" голого " DataTable, который сортировал только одно поле, а затем понял, что некоторые из функций действительно имеют отношение к тому, что я делаю. Клиенты любят новые функции.
бонусные баллы к DataTables для полной поддержки ThemeRoller....
мне также повезло с tablesorter, но это не так просто, не так хорошо документировано и имеет только функции ok.
мы только начали использовать этот скользкий инструмент: http://tablesorter.com/docs/
видео на своей пользе на: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx
$('#tableRoster').tablesorter({
headers: {
0: { sorter: false },
4: { sorter: false }
}
});
С простой таблицей
<table id="tableRoster">
<thead>
<tr>
<th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
<th>User</th>
<th>Verified</th>
<th>Recently Accessed</th>
<th> </th>
</tr>
</thead>
мой ответ будет "будьте осторожны". Многие надстройки сортировки таблиц jQuery сортируют только то, что вы передаете браузеру. Во многих случаях следует иметь в виду, что таблицы являются динамическими наборами данных и потенциально могут содержать миллиарды строк данных.
вы упоминаете, что у вас есть только 4 столбца, но что гораздо важнее, вы не упоминаете, сколько строк мы говорим здесь.
Если вы передаете 5000 строк в браузер из базы данных, зная, что фактическая база данных-таблица содержит 100 000 строк, мой вопрос: какой смысл в сортировке таблицы? Чтобы сделать правильную сортировку, вам нужно будет отправить запрос обратно в базу данных, и пусть база данных (инструмент, фактически предназначенный для сортировки данных) сделает сортировку за вас.
в прямом ответе на ваш вопрос, однако, лучшее Сортировочное дополнение, с которым я столкнулся,-это Ингрид. Есть много причин, по которым мне не нравится это дополнение ("ненужные колокола и свистки..."как вы это называете), но одна из его лучших особенностей с точки зрения сортировки заключается в том, что он использует ajax и не предполагает, что вы уже передали ему все данные, прежде чем он сделает свою сортировку.
Я признаю, что этот ответ, вероятно, излишне (и более чем на 2 года позже) для ваших требований, но я раздражаюсь, когда разработчики в моей области упускают этот момент. Так что я надеюсь, что кто-то еще подхватит.
теперь я чувствую себя лучше.
вот диаграмма, которая может быть полезна, решая, какой использовать:http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/
мне нравится этот принятый ответ, однако, редко вы получаете требования к сортировке html и не должны Добавлять значки, указывающие направление сортировки. Я взял пример использования accept answer и быстро исправил это, просто добавив bootstrap в свой проект и добавив следующий код:
<div></div>
внутри каждого <th> Так что у вас есть место, чтобы установить значок.
setIcon(this, inverse);
от использования принятого ответа, под строка:
th.click(function () {
и, добавив метод setIcon:
function setIcon(element, inverse) {
var iconSpan = $(element).find('div');
if (inverse == false) {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-up');
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-down');
}
$(element).siblings().find('div').removeClass();
}
здесь демо. --Вам нужно либо запустить демо в Firefox или IE,или отключить проверку MIME-типа Chrome для работы демо. Это зависит от плагина sortElements, связанного принятым ответом, как внешнего ресурса. Просто головой!
вы можете использовать плагин jQuery (breedjs), который обеспечивает сортировку, фильтр и разбиение на страницы:
HTML-код:
<table>
<thead>
<tr>
<th sort='name'>Name</th>
<th>Phone</th>
<th sort='city'>City</th>
<th>Speciality</th>
</tr>
</thead>
<tbody>
<tr b-scope="people" b-loop="person in people">
<td b-sort="name">{{person.name}}</td>
<td>{{person.phone}}</td>
<td b-sort="city">{{person.city}}</td>
<td>{{person.speciality}}</td>
</tr>
</tbody>
</table>
JS:
$(function(){
var data = {
people: [
{name: 'c', phone: 123, city: 'b', speciality: 'a'},
{name: 'b', phone: 345, city: 'a', speciality: 'c'},
{name: 'a', phone: 234, city: 'c', speciality: 'b'},
]
};
breed.run({
scope: 'people',
input: data
});
$("th[sort]").click(function(){
breed.sort({
scope: 'people',
selector: $(this).attr('sort')
});
});
});
на ответ Джеймса я только изменю функцию сортировки, чтобы сделать ее более универсальной. Таким образом, он будет сортировать текст по алфавиту и цифры, как цифры.
if( $.text([a]) == $.text([b]) )
return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}
else{
return parseInt($.text([a])) > parseInt($.text([b])) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}
другой подход к сортировке таблицы HTML. (на основе W3.JS HTML Sort)
/* Facility Name */
$('#bioTable th:eq(0)').addClass("control-label pointer");
/* Phone # */
$('#bioTable th:eq(1)').addClass("not-allowed");
/* City */
$('#bioTable th:eq(2)').addClass("control-label pointer");
/* Specialty */
$('#bioTable th:eq(3)').addClass("not-allowed");
var collection = [{
"FacilityName": "MinION",
"Phone": "999-8888",
"City": "France",
"Specialty": "Genetic Prediction"
}, {
"FacilityName": "GridION X5",
"Phone": "999-8812",
"City": "Singapore",
"Specialty": "DNA Assembly"
}, {
"FacilityName": "PromethION",
"Phone": "929-8888",
"City": "San Francisco",
"Specialty": "DNA Testing"
}, {
"FacilityName": "iSeq 100 System",
"Phone": "999-8008",
"City": "Christchurch",
"Specialty": "gDNA-mRNA sequencing"
}]
$tbody = $("#bioTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>');
}.control-label:after {
content: "*";
color: red;
}
.pointer {
cursor: pointer;
}
.not-allowed {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="bioTable" class="w3-table-all">
<thead>
<tr>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th>
<th>Phone #</th>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th>
<th>Specialty</th>
</tr>
</thead>
</table>- Это хороший способ сортировки таблицы:
$(document).ready(function () {
$('th').each(function (col) {
$(this).hover(
function () {
$(this).addClass('focus');
},
function () {
$(this).removeClass('focus');
}
);
$(this).click(function () {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function (a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function (index, row) {
$('tbody').append(row);
});
});
});
}); table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>id</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>Julian</td><td>31</td></tr>
<tr><td>2</td><td>Bert</td><td>12</td></tr>
<tr><td>3</td><td>Xavier</td><td>25</td></tr>
<tr><td>4</td><td>Mindy</td><td>32</td></tr>
<tr><td>5</td><td>David</td><td>40</td></tr>
</table>скрипку можно найти здесь:
https://jsfiddle.net/e3s84Luw/
объяснение можно найти здесь: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code
мой голос! С помощью jQuery.sortElements.js и простой jquery
Очень просто, очень легко, спасибо nandhp...
$('th').live('click', function(){
var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();
switch($(this).attr('inverse')){
case 'false': inverse = true; break;
case 'true:': inverse = false; break;
default: inverse = false; break;
}
th.attr('inverse',inverse)
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
Dei uma melhorada do código
Треска лучше!
функция для всех таблиц во всех Th во все время... Посмотрите это!
демо