带有内联编辑支持的基于 jquery 的表分页答案

【问题标题】：jquery based table pagination with inline edit support带有内联编辑支持的基于 jquery 的表分页
【发布时间】：2012-03-31 10:02:01
【问题描述】：

对于已经做过类似事情的人来说，这可能很简单。

我有一个简单的网格，我在其中将数据呈现到控件（即文本框、复选框等）中，以便用户可以在呈现的行中进行 批量编辑，然后点击提交按钮以获取数据库中的所有更新。

现在，我在我的 ASP.Net MVC2 中有一个这样的可编辑网格的工作版本项目接下来，我想使用 jQuery 进行 排序、分页和过滤 在客户端（您可以假设我正在渲染整个网格很多记录）。我可以通过服务器端编码轻松做到这一点只渲染一页网格，但现在考虑我想在客户端上做一边。

我尝试了一些 jQuery 插件 - 它们工作正常，但对于基于普通只读文本的网格。我的网格有文本框，用户可以编辑的复选框，我的问题是这些插件都没有在搜索和分页期间保留其编辑值。或者他们动态地持久化它——它不会传递给服务器！

例如，在这个 Grid 中，复选框状态要么不会在分页中保持：

希望有人经历过这个并会帮助我。 我们努力保持简单和干净。

尝试过的插件：

【问题讨论】：

【解决方案1】：

其中几个网格让您几乎可以完全控制持久化的内容和时间。如果您希望您的复选框立即保留，您可以在复选框本身上添加一个侦听器，以调用服务器。

我是 DataTables 的忠实粉丝，但我没有将它用于您描述的特定场景。

【讨论】：

【解决方案2】：

我为 tablesorter 编写了一个复选框解析器，它允许您对复选框列进行排序。

我没有对此进行测试，但由于它使用updateCell 方法在您修改复选框时更新缓存的单元格内容，我认为它可能只与寻呼插件一起使用。

查看the demo here，只需复制解析器代码并与寻呼插件一起尝试。

编辑：糟糕，我忘记了它需要来自 github 上这个 fork 的最新版本的 tablesorter。原因是原始的 tablesorter 没有将所有额外的变量传递给 format 函数：format: function(s, table, cell, cellIndex) {}

【讨论】：

我想我也没有使用寻呼机阅读有关表格的部分。如果您使用我的 tablesorter 分支，the pager 有一个名为 removeRows 的附加选项，您可以将其设置为 false 以保持整个 tbody。

【解决方案3】：

基于我目前回顾的几个流行插件以及对它们如何在客户端实现分页的基本理解（或多或少），我得出其中大部分 -

在变量中缓存表格行。他们之前清除了“TBODY” 分页或搜索并用结果重新填充它。

所以，在回发期间，我只得到“重新填充”的行数，而不是实际的表。至少这就是我的 MVC 操作向我展示的。有时，它是空的！

我的结论是，尽管网格似乎在分页中可见，它们与回发期间传递的内容。我很乐意犯错或者如果插件做得更好。

解决方案： 现在，如果我选中的复选框在临时文本框，它将在回发期间使值可用否不管插件对实际表做什么！

谢谢。

【讨论】：

顺便说一句，我已经确认了“jquery.tablesorter.filter.js”的缓存方案 - 它会在回发期间弄乱你的 tbody。充其量你可能会期望它会返回原始的 tbody。这些插件最适合只读/纯文本网格。