在 JQuery 中创建动态 html 表后，应用另一个 JQuery（表排序器）答案

【问题标题】：After creating dynamic html table in JQuery, applying another JQuery (table sorter)在 JQuery 中创建动态 html 表后，应用另一个 JQuery（表排序器）
【发布时间】：2011-12-25 07:38:12
【问题描述】：

我使用 JQuery 从 PHP 的 JSON 数据创建了 HTML TABLE。创建表后，我尝试附加表排序器（JQuery）但是，它不起作用。怎么解决？代码如下：

<script type="text/javascript">
$(document).ready(function() {
        $.getJSON('listnotice.php', function(data) {     

            var table = "";
            $.each(data, function(index,entry) {
                table += '<tr>';
                table += '<td>' +entry["title"] + '</td>';
                table += '<td>' +entry["content"] + '</td>';
                table += '<td>' +entry["date"] + '</td>';
                table += '</tr>';
            });

            table += "</tbody>";
            $("#noticeList").append(table);
           });   

        $("#noticeList").tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0],
                          filterCaseSensitive: false});
});
</script>

</head>
<body>
    <table id="noticeList">
        <thead><tr><th>1</th><th>2</th><th>3</th></tr></thead><tbody>

    </tablev>
</body>
</html>

【问题讨论】：

标签： php jquery json html-table

【解决方案1】：

调用.tablesorter() 插件时，ajax 请求仍将执行。如果您在成功处理程序中移动表格排序器，它应该可以工作。

试试这个：

$(document).ready(function() {
    $.getJSON('listnotice.php', 
        function(data) {     
            var table = "";
            $.each(data, function(index,entry) {
                table += '<tr>';
                table += '<td>' +entry["title"] + '</td>';
                table += '<td>' +entry["content"] + '</td>';
                table += '<td>' +entry["date"] + '</td>';
                table += '</tr>';
            });
            table += "</tbody>";

            $("#noticeList").append(table).tablesorter({debug: false, widgets: ['zebra'], sortList: [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                      filterClearContainer: $("#filter-clear-button"),
                      filterColumns: [0],
                      filterCaseSensitive: false});         
        }
    );
});

【讨论】：

【解决方案2】：

您需要在构建表格的同一回调中应用表格排序器。 getJSON 调用是异步的，按照您现在的方式，您在调用返回之前应用 tablesorter 并构建表。

$.getJSON('listnotice.php', function(data) {     

    var table = "";
    $.each(data, function(index,entry) {
        table += '<tr>';
        table += '<td>' +entry["title"] + '</td>';
        table += '<td>' +entry["content"] + '</td>';
        table += '<td>' +entry["date"] + '</td>';
        table += '</tr>';
    });

    table += "</tbody>";
    $("#noticeList").append(table)
                    .tablesorter({debug: false, widgets: ['zebra'], sortList [[0,0]]}).tablesorterFilter({filterContainer: $("#filter-box"),
                          filterClearContainer: $("#filter-clear-button"),
                          filterColumns: [0],
                          filterCaseSensitive: false});
});

【讨论】：