1

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

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

在 $(document).ready 函数中，可以对表格进行排序，并且 tablesorter 可以按预期工作。但是，如果页面加载，用户单击表单中的按钮以请求特定表格，然后通过 AJAX 将表格发回，表格显示，表格排序器 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 设置为在退出时删除所有内容，当我重新启动它时（出于不同的原因），我发布的代码有效。对此感到抱歉：我没有想到检查浏览器缓存问题。

4

1 回答 1

2

将其放入 DOM 就绪事件中：

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

在 ajax 成功调用中试试这个：

$("#class_roster").trigger("update");
于 2013-09-02T15:11:45.323 回答