Question

我使用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>

Answer 1

您需要在构建表的同一回调中应用tablesorter。 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});
});

Answer 2

当调用.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});         
        }
    );
});

在JQuery中创建动态html表之后，应用另一个JQuery（表分类器）

2 个答案: