Может ли плагин jQuery dataTables уважать альтернативные цвета строк после сортировки / фильтрации?
Я использую плагин jQuery datatables который кажется полезным плагином, чтобы взять обычную таблицу html и добавить сортировку, фильтрацию, подкачку и т. д.
одна проблема, которую я вижу, заключается в том, что при поиске он, похоже, не обновляет классы строк "нечетные" / "четные", поэтому, если моя таблица имеет 100 строк, но когда я фильтрую ее 10, все 10 могут быть одинаковыми backcolor или 8 одинаковыми backcolor
Я вижу ту же проблему после сортировки по столбцу, где это может быть "сгруппируйте" кучу строк с тем же backcolor после того, как я сортирую по столбцу.
есть ли в любом случае, что плагин datatables может повторно применять четный/нечетный стиль после фильтра, поэтому независимо от того, что вы фильтруете, всегда есть альтернативный цвет строки?
4 ответов
причина
эта функция доступна по умолчанию. Скорее всего, причина такого необычного поведения:
- вы переопределяете
odd
иeven
классы в CSS или - ваш код влияет на структуру таблицы после фильтрации
Решение № 1
-
стиль по умолчанию или jQuery UI или Фонд
использовать класс
display
для<table>
как показано ниже. См.параметры стиля по умолчанию для получения списка всех доступных классов.<table id="example" class="display" cellspacing="0" width="100%">
посмотреть этот jsFiddle для демонстрации.
-
использовать классы
table table-striped table-bordered
для<table>
как показано ниже:<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
посмотреть этот jsFiddle для демонстрации.
решение № 2
если есть правило CSS, которое переопределяет odd
и even
классы Вы можете указать jQuery DataTables использовать альтернативные классы вместо stripeClasses
.
$('#example').DataTable( {
"stripeClasses": [ 'odd-row', 'even-row' ]
} );
для этого вы должны использовать базовый стиль - нет классов стилей datatable
для этого просто удалите классы datatable из table
tag
после этого создайте свои собственные классы для odd
(Эл.г myodd
) и even
(Эл.г myeven
) строк.
теперь следующая задача-применить эти классы к строкам таблицы на каждой таблице draw означает:
1. при применении фильтров
2. Когда лимит видимых записей изменяется и т. д.
для этого datatabe предоставляет rowCallback()
вы можете использовать это таким образом:
$('#myTabel').dataTable({
"rowCallback": function( row, data, index ) {
if(index%2 == 0){
$(row).removeClass('myodd myeven');
$(row).addClass('myodd');
}else{
$(row).removeClass('myodd myeven');
$(row).addClass('myeven');
}
}
});
Обратите Внимание:
избежать !important
на css rule
определение css rule
на odd
, even
строк, как это:
table.dataTable tbody tr.myeven{
background-color:#f2dede;
}
table.dataTable tbody tr.myodd{
background-color:#bce8f1;
}
мой этот комментарий применим для как удалить или изменить классы строк jQuery Datatable
Datatables теперь предоставляют необязательный параметр json с именем, определенным для его 1.10+ документация.
Если вы хотите полностью удалить нечетные четные классы затем используйте следующий параметр при инициализации таблицы.
$('#example').dataTable( {
"stripeClasses": [] //Empty Array.
} );
так если вы хотите применить пользовательский класс css к каждой строке Объекты DataTable затем.
$('#example').dataTable( {
"stripeClasses": ['yourRowClass']
} );
Если вы хотите применить более 1 класса css (нечетным четным или последовательным образом) такие, что эти классы будут повторять их самостоятельно после завершения каждой N-й строки, затем используйте это
$('#example').dataTable( {
"stripeClasses": [ 'strip1', 'strip2', 'strip3' ] //This combination will repeat always 3rd row
} );
DataTables будет применять каждый класс последовательно, циклически, когда это необходимо.
Я знаю, что это старый, но мне пришлось расширить вышеупомянутое решение. Я разрешаю пользователю настраивать цвет полосы, поэтому мне пришлось сделать:
rowCallback: (row, data, index) => {
const stripeColor = this.options.stripeColor;
if (index % 2 == 0) {
$(row).removeClass('odd-row even-row');
$(row).addClass('odd-row');
if (!!this.options.stripe) {
$(row).css({ background: 'transparent' })
}
} else {
$(row).removeClass('odd-row even-row');
$(row).addClass('even-row');
if (!!this.options.stripe) {
$(row).css({ background: stripeColor })
}
}
},