Как отсортировать таблицу и сохранить чередующиеся цвета фона при сортировке с помощью jquery? - PullRequest
Новая
       17

Как отсортировать таблицу и сохранить чередующиеся цвета фона при сортировке с помощью jquery?

1 голос
/ 24 июня 2011

У меня проблема с фоновыми цветами строк таблицы после начала сортировки столбцов.Когда мой документ загружается, код запускается так: 

$('tbody tr:even').css('background-color','#F1F1F1');
$('tbody tr:odd').css('background-color','#FFFFF0');

Код для сортировки моего кода таков: 

$('.toggle').toggle(function(){
    $(this).css("background-image", "url('desc.gif')");
}, function(){
    $(this).css("background-image", "url('asc.gif')");
});

, но как только они начинают сортировку, прямо над строкой появляются четные строкидруг с другом и нечетные строки друг на друга.Что я могу правильно изменить цвет строки при сортировке?Я уже пробовал следующее, и оно не работает: 

$('.toggle').toggle(function(){
   $(this).css("background-image", "url('desc.gif')");
   $('tbody tr:even').css('background-color','#F1F1F1');
   $('tbody tr:odd').css('background-color','#FFFFF0');
 }, function(){
   $(this).css("background-image", "url('asc.gif')");
   $('tbody tr:even').css('background-color','#F1F1F1');
   $('tbody tr:odd').css('background-color','#FFFFF0');                 
 });

Ответы [ 2 ]

4 голосов
/ 24 июня 2011

Вы можете получить сортировку и чередование зебр из коробки, если вы просто используете jQuery Tablesorter . Я использую его все время, он прекрасно работает.

Пример таблицы, настроенной с сортировкой, которая поддерживает правильные цвета чередующихся строк: 

$("#mytable").tablesorter({
  widgets: ['zebra']
});
0 голосов
/ 24 июня 2011

Когда кто-либо имеет дело с сортировкой таблиц, разбиением на страницы и т. Д., Я немедленно отсылаю их к DataTables .Он правильно выполняет сортировку, сохраняя разметку «полоса зебры», которую вы ищете.В настоящее время он работает в приложении моей компании, и это здорово.

Причина, по которой я всегда предлагаю этот подход, заключается в дополнительных функциях, которые вы получаете.Сортировка, разбиение по страницам, фильтрация и ограничение результатов - все через таблицу, загруженную в dom, или через источники данных JSON или AJAX.Кроме того, добавьте ThemeBuilder для быстрой стилизации и выдающегося, хорошо поддерживаемого CSS, и это делает инструмент, который нельзя игнорировать.

...