Исключить столбец из сортировки с помощью jQuery tablesorter
Я ищу способ исключить сортировку одного столбца с помощью плагина jQuery tablesorter. В частности, у меня довольно большая таблица, и я бы хотел сохранить столбец «номер строки» фиксированным, чтобы было легко увидеть, в какой позиции в таблице находится конкретная строка после сортировки.
Например:
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
При сортировке по столбцу имени должно получиться:
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
Спасибо.
Ответы 8
Грм. Судя по методу реорганизации таблицы tableorter, я почти уверен, что это не совсем возможно. Tablesorter извлекает каждый tr из DOM один за другим и сортирует их на основе индексированного поля, повторно вставляя весь tr без какого-либо изменения содержимого tr. После каждой сортировки запрошенное решение должно проходить по таблице и заново перечислять первый столбец. У Tablesorter есть плагин-метод, который используется zebrastripe и другими расширениями. Возможно, это можно было бы использовать для перехвата методов сортировки?
Вот виджет, который вы можете использовать, чтобы выполнить то, что вы ищете:
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
for(var i=0; i < table.tBodies[0].rows.length; i++) {
$("tbody tr:eq(" + i + ") td:first",table).html(i+1);
}
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
});
Отличный материал, но одна маленькая вещь, он не должен начинать цикл с var i=0;, а с var i=1;, иначе он получит индекс 0 внизу таблицы.
Обновлено: я сделал образец этой техники на http://jsbin.com/igupu4/3. Щелкните заголовок любого столбца, чтобы отсортировать ...
Хотя у меня нет ответа на ваш вопрос о jquery, вот альтернативный способ получить конкретное поведение, которое вы здесь описали, фиксированные номера строк после сортировки. (Используя CSS, в частности свойство содержимого и свойства / функции, связанные со счетчиком.)
<html>
<head>
<title>test</title>
<style type = "text/css">
tbody tr
{
counter-increment : rownum ;
}
tbody
{
counter-reset: rownum;
}
table#sample1 td:first-child:before
{
content: counter(rownum) " " ;
}
table#sample2 td.rownums:before
{
content: counter(rownum) ;
}
</style>
<script src = "jquery-1.2.6.min.js" ></script>
<script src = "jquery.tablesorter.min.js" ></script>
<script>
$(document).ready(function()
{
$("table").tablesorter();
}
);
</script>
</head>
<body>
<table id = "sample1">
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
</thead>
<tbody>
<tr>
<td>
<p>foo</p>
</td>
<td>
<p>quuz</p>
</td>
</tr>
<tr>
<td>bar</td>
<td>quux</td>
</tr>
<tr>
<td>baz</td>
<td>baz</td>
</tr>
</tbody>
</table>
<table id = "sample2">
<thead>
<tr>
<th>Rownums</th>
<th>Col 1</th>
<th>Col 2</th>
<th>More Rownums</th>
</thead>
<tbody>
<tr>
<td class = "rownums"></td>
<td>
<p>foo</p>
</td>
<td>
<p>bar</p>
</td>
<td class = "rownums"></td>
</tr>
<tr>
<td class = "rownums"></td>
<td>quuz</td>
<td>baz</td>
<td class = "rownums"></td>
</tr>
<tr>
<td class = "rownums"></td>
<td>fred</td>
<td>quux</td>
<td class = "rownums"></td>
</tr>
</tbody>
</table>
</body>
</html>
Если ваш браузер в достаточной степени совместим с CSS2.1, вы можете использовать tr: before вместо td: first-child: before в примере 1. (Mozilla пока поддерживает это только в транке ...)
В примере 2 вы можете увидеть, как расположить столбцы с номерами строк в любом месте, а не только в первом столбце.
Для тех, кто обнаруживает это при поиске способа исключить столбец из сортировки (т.е. интерактивный заголовок столбца), в приведенном ниже примере исключается столбец 4 (с нулевым индексом) из сортировки):
$("table").tablesorter({
headers: {4: {sorter: false}}
});
Это пропустит сортировку для первого столбца и разрешит сортировку для второго. Просто установите true / false для всех столбцов, начиная с первого столбца как ноль.
<script>
$(document).ready(function() {
$("table").tablesorter({
headers: {
0: {sorter: false},
1: {sorter: true},
3: {sorter: false}
}//headers
});
});
</script>
Ответ Брайана Фишера правильный, но он слишком медленный в больших таблицах (+1600 строк в моем примере). Я улучшил способ перебора всех строк. В остальном все то же самое.
$(function() {
// add new widget called indexFirstColumn
$.tablesorter.addWidget({
// give the widget a id
id: "indexFirstColumn",
// format is called when the on init and when a sorting has finished
format: function(table) {
// loop all tr elements and set the value for the first column
$(table).find("tr td:first-child").each(function(index){
$(this).text(index+1);
})
}
});
$("table").tablesorter({
widgets: ['zebra','indexFirstColumn']
});
});
$("table").tablesorter({
headers: {4: {sorter: false},8: {sorter: false}}
});
Проголосовали. В вашем ответе нет ничего гениального, но он все же очень полезен, потому что в документации Github о tableorter нелегко найти информацию.
Ответ Стобора идеален. Единственная проблема заключается в том, что для размещения чисел необходимо дождаться полной визуализации таблицы.
Некоторые наблюдения:
- Вам нужно дать пустой столбец для этого метода поставить числа.
- Если у вас есть заголовки в таблице, вы должны использовать теги THEAD и TBODY, чтобы позволить tableorter сортировать только данные в разделе TBODY.
- Если у вас есть нижний колонтитул в ваших таблицах, вы должны выпустить его из раздела TBODY, чтобы не допустить tableorter для сортировки его содержимого, также вы должны использовать теги TH вместо TD, чтобы избежать нумерации нижнего колонтитула.
Примечание: Метод, показанный Абдулом, ограничивает пользователя только сортировкой по указанным столбцам, но его содержимое всегда упорядочивается вместе с остальной частью строки, когда выбран порядок по другому неограниченному столбцу.
Очень хорошо! Я думаю, что в цикле for должно быть «<=», а не «<».