Question

如果我在HTML文档中创建一个表并插入

$('#class_roster').tablesorter();

在$（document）.ready函数中，表可以排序，tablesorter按预期工作。但是，如果页面加载，用户单击表单中的按钮以请求特定的表，并通过AJAX发回表，表格显示，应用tablesorter css，但排序图标不显示，表格不是不可分类。没有错误出现。这与浏览器无关（例如，Chrome 29和Firefox 23）。

AJAX调用在验证函数内。以下是片段：

/* Validate the info entered */
$('#loadTable').validate({
    rules: {
        snip
    },
    messages: {
        snip
    },
    submitHandler: function(form) {
        var formData = $(form).serialize();
        $.ajax({
            url: "/snip", 
            data: formData,
            type: 'post',
            headers: { "cache-control": "no-cache" },
            error: function(XMLHttpRequest, textStatus, errorThrown){
                snip
            },
            success: function(data){
                var theResult = JSON.parse(data);
                $('#Student_Info').html(theResult.Student_Info); /* displays table in div 'Student_Info' */
                $('#class_roster').tablesorter();
            }
        });
    }
});

在这两种情况下，表格都是这样的：

<table id="class_roster" class="tablesorter" >
    <thead>
        <tr><th>Col 1</th><th>Col 2</th> ... </tr>
    </thead>
    <tbody>
        <tr><td>Info 1</td><td>Info 2</td> ... </tr>
        <tr><td>Info 1</td><td>Info 2</td> ... </tr>
        <tr><td>Info 1</td><td>Info 2</td> ... </tr>
    </tbody>
</table>

我不确定为什么代码在加载文档时存在表时工作，而不是在动态生成表时工作。（要清楚，我有两个相同的页面。）

有很多问题都在考虑通过AJAX向表中追加行，而且在tablesorter网站上甚至有一个例子，但我找不到任何与全新表相关的内容。

更新

事实证明这是一个浏览器缓存问题。这两个浏览器都已暴露给开发代码，但由于某些原因没有更新javascript文件。我有Firefox设置在退出时删除所有内容，当我重新启动它时（由于其他原因），我发布的代码工作正常。抱歉：我没有检查浏览器缓存问题。

Answer 1

把它放在DOM ready事件中：

$("#class_roster").tablesorter();

在ajax成功通话中尝试此操作：

$("#class_roster").trigger("update");

jquery tablesorter不适用于通过ajax获取的表但是为静态表工作

1 个答案: