【发布时间】: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