tablesorter v2.0 在表中动态添加行

Posted 2023-05-09

【中文标题】tablesorter v2.0 在表中动态添加行

【英文标题】：tablesorter v2.0 dynamically adding rows in a table

【发布时间】：2016-11-22 13:14:40

【问题描述】：

我们正在尝试在我们的解决方案中实现 Tablesorter v2.0。我们在项目中使用了 Knockout、MVC、C#。

我们在整个项目中都有场景，在表格中，我们根据执行的搜索结果动态添加行或添加/删除行。 我们还在上述场景中实现了表格排序，但它们似乎不起作用

场景 1： 1) 在页面加载期间添加以下代码行 $('.tablesorter').tablesorter(); 2) 在表中动态添加/删除行或根据搜索结果动态添加行时添加以下代码行。 $("table").trigger("updateAll");或 $("table").trigger("update");

场景 2： 1) 在页面加载期间添加以下代码行 $('.tablesorter').tablesorter(); 2) 在表格中动态添加/删除行时添加以下代码行 $('.tablesorter').tablesorter();

两种情况下的问题： • 当我们根据搜索结果添加新行或动态添加行时，根据第 2 点（上图），系统会动态复制表中的行，并且排序也不会正确进行。

任何解决上述问题的建议将不胜感激。

【参考方案1】：

Tablesorter 应该只初始化一次。在相同元素上多次使用$('.tablesorter').tablesorter(); 将被忽略。设置debug option 来测试这个行为。

要更新 tablesorter 的内部缓存，您应该触发 "update" event。

添加新/删除行。 $("table").trigger("update");

仅在添加或删除列时使用"updateAll" event。

添加/删除表格列。 $("table").trigger("updateAll");