使用 PHP 的 Jquery 和 tablesorter 返回 JSON答案

【问题标题】：Jquery and tablesorter with PHP returned JSON使用 PHP 的 Jquery 和 tablesorter 返回 JSON
【发布时间】：2015-10-04 01:01:27
【问题描述】：

我正在尝试使用 tablesorter 解析为 php POST 请求返回的 json。

Post 请求成功返回 json，但是 tablesorter 无法正常工作。据我所知，只有静态表数据正在使用表排序器。表格排序器未应用于正在格式化为表格行的返回 JSON 数据。

所以基本上，我得到的是手动放置在 HTML 正文中的标题值的过滤器功能。我相信这是因为当 tablesorter 应用于表时返回的 json 不在 DOM 中。我认为在 Jquery php post 请求之后放置 tablesorter 代码可以解决这个问题，但仍然无法正常工作。

如果问题tablesorter无法处理返回的数据，那么我唯一的选择是在php中构建表格，然后将完成的表格返回到带有php post的页面吗？

$.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>

【问题讨论】：

标签： php jquery dom post tablesorter

【解决方案1】：

想通了。

为此，您必须首先在一个空表上初始化 tablesorter。然后使用 PHP Post 添加数据。

为了添加数据，我使用了 append 方法而不是 first().after(html);

完成此操作后，您需要使用 update 调用触发方法。

这是更新后的代码。

$("#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>

【讨论】：