【问题标题】:jquery tablesorter not working for table obtained via ajax but working for static tablejquery tablesorter 不适用于通过 ajax 获得的表,但适用于静态表
【发布时间】:2013-09-02 15:07:21
【问题描述】:

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

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

在 $(document).ready 函数中,可以对表格进行排序,并且 tablesorter 可以按预期工作。但是,如果页面加载,用户单击表单中的按钮以请求特定表格,然后通过 AJAX 将表格发回,表格显示,表格排序器 css 应用,但排序图标不出现,表格未显示'不可排序。没有出现错误。这是独立于浏览器的(例如,Chrome 29 和 Firefox 23)。

AJAX 调用在验证函数中。这里是sn-ps:

/* 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 设置为在退出时删除所有内容,当我重新启动它时(出于不同的原因),我发布的代码有效。 对此感到抱歉:我没有想到要检查浏览器缓存问题。

【问题讨论】:

  • 这是一个插入到已经包含class_roster 表的页面中的新表吗?也就是说,你现在有没有两个相同 id 的表?
  • 如果您最终拥有 2 个具有相同 id 的表,则表排序器将仅适用于任何一个表。
  • 这两个表在不同的页面。在第 1 页中,静态表是唯一的表。在第 2 页中,动态表是唯一的表。我这样做是为了检查代码的其他方面(例如,加载正确的库、名称中的拼写错误等)。

标签: javascript jquery ajax tablesorter


【解决方案1】:

将其放入 DOM 就绪事件中:

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

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

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

【讨论】:

  • 感谢您的建议。我刚刚尝试过,行为没有变化:动态表仍然没有排序图标,无法排序。我不知道这是否相关,但整个验证函数都在 $(document).ready 函数中。
  • 奇怪!这对我来说是有效的。把你的代码放在小提琴里。
猜你喜欢
  • 2012-09-10
  • 2019-10-23
  • 1970-01-01
  • 1970-01-01
  • 2017-12-11
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多