Табличный сортировщик Zebra не выполняет начальную сортировку

Question

У меня проблема с плагином TableSorter и виджетом Zebra, которые позволяют разные стили для четных / нечетных строк.

Моя страница начинается с пустой таблицы; затем пользователь компилирует форму, а затем загружается моя таблица... так что проблема в следующем: при начальной загрузке (которая также сортирует столбец) чередование зебр не работает; все мои строки имеют одинаковый цвет фона... но когда пользователь начинает сортировать столбцы или переходить к другим результатам страницы (с надстройкой "пейджер" в той же таблице), виджет "зебра" работает.

Что случилось?

Версия Jquery: 1.9.0

версия таблиц: 2.7.12

Вот мой код JavaScript:

$("table").tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
        zebra: ["even","odd"]
    }
});

Заранее спасибо!

Answer 1

Вы можете использовать решение только для css и создать резервную копию с помощью jQuery для ie8 и ниже

посмотрите на скрипку здесь: http://jsfiddle.net/GZPqE/

<table class="zebra">
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
    <tr>
        <td>col 1</td>
        <td>col 2</td>
        <td>col 3</td>
        <td>col 4</td>
    </tr>
</table>

/*CSS*/
.zebra tr:nth-child(even) {
  background-color: #333;
  color: #fff;
}

/*
 * uncomment this to see the jQuery solution
 $("tr:nth-child(even)").css({"background-color":"blue", "color":"#fff"});
 */

Answer 2

Используйте CSS, чтобы раскрасить четные и нечетные строки:

$("table")
  .tablesorter({
    widthFixed: true,
    sortList: [[3,0]],
    widgets: ["zebra"],
    widgetOptions:{
      zebra: ["even","odd"]
    }
  })
  .find('tr:nth-child(even)')
    .css('background-color', 'white')
    .end()
  .find('tr:nth-child(odd)')
    .css('background-color', 'lightgray')
    .end();