Ошибка jQuery Tablesorter
Просто обновлен до последнего tablesorter и выглядит как сломанный или что-то в этом роде. Каждый раз, когда я пытаюсь открыть свою страницу, Firebug говорит:
table.config.parsers undefined
И это просто ломает весь мой Javascript.
Если я верну версию tablesorter, она будет работать нормально.
JavaScript:
$("#List").tablesorter({
widgets: ['zebra'],
headers: {
4: { sorter: false }
}
})
HTML:
<table id="List" class="tablesort ui-widget-content ui-corner-top">
<thead>
<tr class="ui-widget">
<th>País</th>
<th>ISO</th>
<th>ISO3</th>
<th>CODE</th>
<th> </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
Ответы
Ответ 1
Я только что столкнулся с этой ошибкой, поэтому я подумал, что отправлю ответ, если кто-то еще столкнется с этим позже.
Хотя приведенный выше ответ не упоминает об этом, я смог реплицировать ошибку, сначала создав экземпляр 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]);
Комбинация события "update" и "sorton", кажется, вызывает ошибку. К тому времени, когда обрабатывается событие "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() - действительно удобный плагин. Спасибо Кристиану за его освобождение.
Ответ 2
Бит опоздал, но из-за того, что у вас есть пустой /no <tr>
элемент в <tbody>
, и он ожидает хотя бы один <tr>
.
Ответ 3
Я попробовал некоторые из ответов выше, но они не помогли на каждой странице, которую мы использовали tablesorter. Основная причина, по которой я понял ошибку, состоит в том, что c = sortList [i] [0] является undefined либо потому, что у нас есть пустой TR, либо у нас не такое же число TD, как у TH.
У меня было 8 TH/TD, если у меня есть данные таблицы и 8 TH и один TD, если мне нечего показать. Мне удалось проверить, нет ли у меня данных таблицы, и не вызывайте tablesorter для сортировки по определенным столбцам, которые не существуют. Это сделал трюк. Может помочь кому-то с похожим сценарием
if(tableData.length != 0){
$("#myid").tablesorter( {sortList: [[2,0]]});
}
Ответ 4
Проблема заключается в том, что если таблица заполняется через JavaScript, tablesorter не находит новый контент, если браузер не отобразил новое содержимое.
Увольнение tablesorter внутри метода setTimeout() удалило эту ошибку для меня.
function initPage() {
fillMyTable();
// Init table sorter, but give the browser a second to draw the new table
setTimeout(function(){ $("#my_table").tablesorter(); }, 1000);
}
Ответ 5
Другой ответ на всякий случай, когда кто-либо сталкивается с тем же сценарием, который я сделал. По-видимому, сортировщик таблиц иногда любит иметь соответствующее количество пустых <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}"> </th>
</tr>
</thead>
<tbody>
<tr style="display:none"><td></td><td></td><td></td><td></td></tr>.........................
Ответ 6
Обратите внимание, что tableorter пример AJAX демонстрирует сценарий, в котором новые строки добавляются к существующим. Когда таблица динамически опустошается и заполняется новыми строками, вышеназванные поверхности ошибок.
Добавление пустой строки
<tr style="display:none"><td></td>...<td></td></tr>
с тем же числом <td>
, поскольку число <th>
в заголовке удаляет ошибку, но вводит другую: после того, как таблица опустела и пополнилась реальными строками, новые строки добавляются к старым.
В качестве альтернативы модификации исходного кода tablesorter попробуйте выполнить следующую последовательность вызовов:
$("#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);