Исключить сортировку столбца с помощью jQuery tablesorter
Я ищу способ исключить сортировку одного столбца с помощью плагина jQuery tablesorter. В частности, у меня довольно большая таблица, и я бы хотел, чтобы столбец "номер строки" был исправлен, так что легко видеть, какая позиция в таблице является определенной строкой после сортировки.
Например:
# name
-----------
1 papaya
2 apple
3 strawberry
4 banana
При сортировке по столбцу имени следует:
# name
-----------
1 apple
2 banana
3 papaya
4 strawberry
Спасибо.
Ответы
Ответ 1
Вот виджет, который вы можете использовать, который выполнит то, что вы ищете:
$(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']
});
});
Ответ 2
Для тех, кто находит это, ища способ исключить сортировку столбца (т.е. заголовок с кликом в столбце), приведенный ниже пример исключает сортировку столбца 4 (с нулевой индексацией):
$("table").tablesorter({
headers: {4: {sorter: false}}
});
Ответ 3
Изменить: я сделал образец этой техники в 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 только поддерживает это в trunk на данный момент...)
В примере 2 вы можете увидеть, как разместить столбцы номера строки в любом месте, а не только в первом столбце.
Ответ 4
Это будет пропускать сортировку для первого столбца и разрешить ее для второго. Просто установите true/false для всех столбцов, начиная с первого столбца, как ноль.
<script>
$(document).ready(function() {
$("table").tablesorter({
headers: {
0: {sorter: false},
1: {sorter: true},
3: {sorter: false}
}//headers
});
});
</script>
Ответ 5
Ответ Брайана Фишера правильный, но он слишком медленный в больших таблицах (+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']
});
});
Ответ 6
$("table").tablesorter({
headers: {4: {sorter: false},8: {sorter: false}}
});
Ответ 7
Хмм. Из метода ретрансляции таблицы tablesorter я уверен, что это невозможно. Tablesorter перемещает каждый tr из DOM один за другим и сортирует их на основе индексированного поля, повторно вставляя весь tr без изменения содержимого tr любым способом. Затем ваше запрошенное решение должно повторить повторение по таблице после каждого сортировки и повторное перечисление первого столбца. Tablesorter имеет метод плагина, который используется zebrastripe и другими расширениями. Возможно, это можно использовать для подбора методов сортировки?
Ответ 8
Ответ Стобора идеален. Единственная проблема заключается в том, что нужно подождать, пока таблица не будет полностью отображена, чтобы поместить числа.
Некоторые наблюдения:
- Вам нужно указать пустой столбец, чтобы этот метод поместил числа.
- Если у вас есть заголовки в таблице, вы должны использовать теги THEAD и TBODY, чтобы позволить tablesorter сортировать только данные в разделе TBODY.
- Если у вас есть нижний колонтитул в ваших таблицах, вы должны разрешить это из секции TBODY, чтобы избежать сортировки его содержимого, а также использовать тэги TH вместо TD, чтобы избежать нумерации нижнего колонтитула.
Примечание:
Метод, показанный Abdul, ограничивает пользователя сортировкой по указанным столбцам, но его содержимое всегда упорядочивается вместе с остальной частью строки, когда выбран порядок с помощью другого неограниченного столбца.
