Может ли плагин jQuery dataTables уважать альтернативные цвета строк после сортировки / фильтрации?

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

одна проблема, которую я вижу, заключается в том, что при поиске он, похоже, не обновляет классы строк "нечетные" / "четные", поэтому, если моя таблица имеет 100 строк, но когда я фильтрую ее 10, все 10 могут быть одинаковыми backcolor или 8 одинаковыми backcolor

Я вижу ту же проблему после сортировки по столбцу, где это может быть "сгруппируйте" кучу строк с тем же backcolor после того, как я сортирую по столбцу.

есть ли в любом случае, что плагин datatables может повторно применять четный/нечетный стиль после фильтра, поэтому независимо от того, что вы фильтруете, всегда есть альтернативный цвет строки?

4 ответов


причина

эта функция доступна по умолчанию. Скорее всего, причина такого необычного поведения:

  • вы переопределяете odd и even классы в CSS или
  • ваш код влияет на структуру таблицы после фильтрации

Решение № 1

  1. стиль по умолчанию или jQuery UI или Фонд

    использовать класс display для <table> как показано ниже. См.параметры стиля по умолчанию для получения списка всех доступных классов.

    <table id="example" class="display" cellspacing="0" width="100%">   
    

    посмотреть этот jsFiddle для демонстрации.

  2. загрузки

    использовать классы 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;
}

демо: http://jsfiddle.net/ishandemon/4za80xky/


мой этот комментарий применим для как удалить или изменить классы строк 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 })
    }
  }
},