плагин jquery tablesorter - сохраняет альтернативные цвета строк
-
10-07-2019 - |
Вопрос
Я взял html-таблицу, к которой применяю альтернативные цвета строк, и добавил в нее сортировщик таблиц jquery, чтобы пользователи могли сортировать таблицу.
Проблема в том, что все альтернативные цвета строк теперь перепутаны, поскольку (на основе сортировки) существует несколько строк с одинаковым цветом фона.
Есть ли какой-нибудь способ сбросить альтернативный цвет строки с помощью jquery table sorter?
Решение
Там уже есть виджет по умолчанию zebra
, встроенный в ядро, которое применяет классы odd
и even
чередовать ряды.Это работает независимо от того, добавили вы это или нет class=even/odd
в html-файл.
Это действительно легко настроить.Я просто следовал инструкциям на веб-сайт сортировщика таблиц, а затем изменил функцию document ready следующим образом:
<script type="text/javascript">
$(document).ready(function()
{
$("#myTable").tablesorter({
widgets: ['zebra']
});
}
);
</script>
Отвечая на вопрос, я привел пример.Ты можешь посмотреть результат в действии, или смотрите пример кода.
Другие советы
Основано на ответе Энтони, но перефразировано в одну строку (в основном):
function fixStripes() {
$('table tr').removeClass('odd even')
.filter(':even').addClass('even').end()
.filter(':odd').addClass('odd');
}
$("table").bind("sort", fixStripes);
Вызовы JQuery могут быть «связаны» как и выше, используя такие операции, как filter ()
, чтобы ограничить выбранные элементы, и .end ()
, чтобы "сбросить" " до последнего выбора. Другими словами, каждый .end ()
" отменяет " предыдущий .filter ()
. Окончательный вариант .end ()
пропущен, поскольку после этого ничего не поделаешь.
Чтобы сохранить полоски зебры после сортировки, вам нужно снова запустить виджет зебры.
$('#myTable')
.tablesorter({ widgets: ['zebra'] })
.bind('sortEnd', function(){
$("#myTable").trigger("applyWidgets");
});
Это скорее не хак, так как вы будете повторно использовать логику виджета «зебра», а не копировать ее.
Примечание. Обход такого рода требуется только в тех случаях, когда происходит сбой виджета Zebra по умолчанию. В большинстве случаев я обнаружил, что этот хак не требуется, так как виджет работает правильно после сортировки.
Как насчет:
function fixStripes() {
var i = 0;
var rowclass;
$("table tr").each(function() {
$(this).removeClass("odd even");
rowclass = (i%2 == 1) ? "odd" : "even";
$(this).addClass(rowClass);
});
}
$("table").bind("sort", fixStripes);
О, и если вы хотите действительно простое исправление, вы можете задержать дыхание, чтобы этот псевдокласс CSS был подхвачен всеми основными браузерами:
table tr:nth-child(n+1) {
color: #ccc;
}
Но мое предположение основано на том, как FF и компания обрабатывают CSS для динамического HTML, это установит нагрузку на полосы, но не будет применять CSS после сортировки. Но я бы хотел знать наверняка.
Пересмотренное и последнее рабочее решение - встроенное * Это также позволит изменить цвет при клике. *
<script type="text/javascript">
$(document).ready(function () {
$('#tblLookupResult').tablesorter({ widthFixed: true, sortList: [[0, 0], [0, 1], [0, 2]], theme: 'blue', widgets: ['zebra'] })
.tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
$('#tbltable1 tbody tr').live('click', function () {
if ($(this).hasClass('even')) {
$(this).removeClass('even');
$(this).addClass('ui-selected');
}
else if ($(this).hasClass('odd')) {
$(this).removeClass('odd');
$(this).addClass('ui-selected');
}
else {
$(this).removeClass('ui-selected');
$(".tablesorter").trigger("update");
$(".tablesorter").trigger("applyWidgets");
}
});
});
</script>
Теперь все должно выйти само собой!
Через ваш CSS:
table.tablesorter tr:nth-child(even) {
background-color: #ECFAFF;
}