Jquery 和带 PHP 的表格排序器返回 JSON

Question

我正在尝试使用 tablesorter 来解析 json returned 以获取 php POST 请求。

Post 请求 return 成功 json，但是，table 分类器无法正常工作。据我所知，只有静态 table 数据采用 table 排序器。 table排序器未应用于 returned JSON 数据，这些数据正被格式化为 table 行。

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

如果问题 tablesorter 无法处理 returned 数据，那么我唯一的选择是在 php 中构建 table，然后 return 完成后 table 到页面 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>

Answer 1

想通了。

为此，您必须首先在空 table 上初始化 tablesorter。然后添加带有 PHP Post 的数据。

为了添加数据，我使用了 append 方法而不是 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>

Jquery 和带 PHP 的表格排序器返回 JSON

Jquery and tablesorter with PHP returned JSON

php

jquery

post

dom

tablesorter