Ошибка сортировщика таблиц jQuery

Хотя в приведенном выше ответе об этом не упоминается, я смог воспроизвести ошибку, сначала создав экземпляр tablesorter(), а затем инициировав запрос сортировки.

Этот порядок событий будет необходим при добавлении или замене существующих данных таблицы новыми данными через AJAX или иным образом:

// populate our table body with rows
$("#myTable tbody").html(json.tbody);

// let the sorting plugin know that we made a update
$("#myTable").trigger("update");

// set sorting column and direction, this will sort on the first and third column
var sorting = [[2,1],[0,0]];

// sort
$("#myTable").trigger("sorton",[sorting]);

Комбинация события «обновление» и «сортон», похоже, вызывает ошибку. К тому времени, когда событие "sorton" обрабатывается, DOM не был назначен table.config.parsers - отсюда и ошибка.

Исправление состоит в том, чтобы обернуть обработку события «sorton» тайм-аутом в 1 миллисекунду.

Замените существующую привязку «sorton» в jquery.tablesorter.js (строка ~803) следующим:

}).bind("sorton", function (e, list) {
    var me = this;
    setTimeout(function () {
        $(this).trigger("sortStart");
        config.sortList = list;
        // update and store the sortlist
        var sortList = config.sortList;
        // update header count index
        updateHeaderSortCount(me, sortList);
        // set css for headers
        setHeadersCss(me, $headers, sortList, sortCSS);
        // sort the table and append it to the dom
        appendToTable(me, multisort(me, sortList, cache));
    }, 1);

tablesorter() — действительно удобный плагин. Спасибо Кристиану за выпуск.

Немного поздно, но это потому, что у вас есть пустой/нет элемента <tr> в <tbody>, и он ожидает хотя бы один <tr>.

Я попробовал некоторые из приведенных выше ответов, но они не помогли на каждой странице, на которой мы использовали таблицы. Основная причина, по которой я понял ошибку, заключается в том, что c=sortList[i][0] не определено либо потому, что у нас есть пустой TR, либо у нас не то же количество TD, что и у TH.

У меня было 8 TH/TD на случай, если у меня есть табличные данные, и 8 TH и один TD на случай, если мне нечего показать. Мне удалось проверить, нет ли у меня данных таблицы, а затем не вызывать таблицы для сортировки по определенным столбцам, которых не существует. Это помогло. Может помочь кому-то с похожим сценарием

if(tableData.length != 0){
  $("#myid").tablesorter( {sortList: [[2,0]]});
}

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

Запуск сортировщика таблиц внутри подпрограммы setTimeout() устранил эту ошибку для меня.

    function initPage() {
        fillMyTable();
        // Init table sorter, but give the browser a second to draw the new table
        setTimeout(function(){ $("#my_table").tablesorter(); }, 1000);
    }

Еще один ответ на случай, если кто-нибудь когда-нибудь столкнется с тем же сценарием, что и я. По-видимому, сортировщику таблиц иногда нравится иметь соответствующее количество пустых элементов <td> (таких же, как элементы заголовка) внутри пустого <tr>. Мой частичный пример ниже

<thead>
    <tr>
        <th class="{sorter: 'text'}'' "><a href="javascript:;" title="Sort" class="arrow"><span>Network Name</span></a></th>
        <th class="{sorter: 'text'} "><a href="javascript:;" title="Sort" class="arrow"><span>Type</span></a></th>
        <th class="{sorter: false}"><a href="javascript:;" title="Sort" class="arrow"><span>Interconnections</span></a></th>
        <th class="{sorter: false}">&nbsp;</th>
    </tr>
</thead>

<tbody>
    <tr style="display:none"><td></td><td></td><td></td><td></td></tr>.........................

Обратите внимание, что пример AJAX демонстрирует только сценарий, в котором новые строки добавляются к существующим. Когда таблица динамически очищается и заполняется новыми строками, появляется указанная выше ошибка.

Добавление пустой строки

<tr style="display:none"><td></td>...<td></td></tr>

с тем же количеством <td>s, что и количество <th>s в заголовке, устраняет ошибку, но вносит другую: после того, как таблица очищается и заполняется реальными строками, новые строки добавляются к старым.

В качестве альтернативы изменению исходного кода сортировщика таблиц попробуйте следующую последовательность вызова:

$("#my-table").trigger("update");
setTimeout(function() { 
    /* e.g. sort by the second column in descending order */
    var sorting = [[1, 1]];
    $("#my-table").trigger("sorton", [sorting]);
}, 100);

Я столкнулся со случаем, когда я получил это сообщение об ошибке, не обновляя таблицы сортировщика специально, а только потому, что количество столбцов в элементе tfoot не соответствовало количеству столбцов в элементах thead и tbody, поэтому плагин таблицы сортировщика сбился с толку.

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