JQuery и TableSorter с PHP вернул JSON

Question

JQuery и TableSorter с PHP вернул JSON

Я пытаюсь использовать TableSorter для синтаксического анализа JSON возвращается для запроса POST PHP.

Запрос Post успешно возвращает json, однако сортировщик таблиц работает неправильно.
Из того, что я могу сказать, только статические данные таблицы занимают сортировщик таблиц.
Сортировщик таблиц не применяется к возвращенным данным JSON, которые форматируются в строки таблицы.

Таким образом, в основном, я получаю функцию фильтра для значений заголовка, которые вручную помещаются в тело HTML.
Я полагаю, что это происходит потому, что возвращаемый json отсутствует в DOM, когда к таблице применяется табличный сортировщик.
Я думал, что размещение кода TableSorter после пост-запроса Jquery php исправит это, но все еще не работает.

Если проблемный сортировщик таблиц не будет работать с возвращенными данными, мой единственный вариант — построить таблицу в php, а затем вернуть заполненную таблицу на страницу с сообщением php?

$.when($.post('../php/load_json.php',{path: dir})).done(
function(data){
var obj = jQuery.parseJSON(data);
var html = '';
for(var i = 0; i < obj.length; i++){
html += '<tr><td>' + obj[i].vala+ '</td><td>' + obj[i].valb+ '</td><td>' + obj[i].valc+ '</td><td>' + obj[i].vald+ '</td><td>' + obj[i].vale+ '</td></tr>';
}

$('#mytable tbody').first().after(html);

$("#mytable ")
.tablesorter({
theme: 'blue',
headerTemplate : '{content} {icon}',
widthFixed: true,
widgets: ['zebra', 'filter']
})
});


<html><body>
<table id="mytable" class="tablesorter">
<thead><tr>
<th>vala</th>
<th>valb</th>
<th>valc</th>
<th>vald</th>
<th>vale</th>
</tr></thead>
<tbody>
</tbody>
</table>
</body></html>

1

dom jquery php post tablesorter

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

Догадаться.

Для этого вы должны сначала инициализировать TableSorter на пустой таблице.
Затем добавьте данные с помощью PHP Post.

Чтобы добавить данные, я использовал метод добавления вместо first().after(html);

Как только это будет сделано, вам нужно вызвать метод триггера с обновлением.

Вот обновленный код.

$("#mytable ")
.tablesorter({
theme: 'blue',
headerTemplate : '{content} {icon}',
widthFixed: true,
widgets: ['zebra', 'filter']
})
});


$.when($.post('../php/load_json.php',{path: dir})).done(
function(data){
var obj = jQuery.parseJSON(data);
var html = '';
for(var i = 0; i < obj.length; i++){
html += '<tr><td>' + obj[i].vala+ '</td><td>' + obj[i].valb+ '</td><td>' + obj[i].valc+ '</td><td>' + obj[i].vald+ '</td><td>' + obj[i].vale+ '</td></tr>';
}

$("#mytable tbody").append(html);
$("#mytable ").trigger("update");




<html><body>
<table id="mytable" class="tablesorter">
<thead><tr>
<th>vala</th>
<th>valb</th>
<th>valc</th>
<th>vald</th>
<th>vale</th>
</tr></thead>
<tbody>
</tbody>
</table>
</body></html>

1