javascript - jQuery tablesorter 使用 tablesorterPager 和隐藏行

Question

我目前在一个表中有一个很大的结果集，我正在根据页面中的其他过滤器对某些行应用和删除“隐藏”类(显示:无)。我能够得到tablesorter使用 zebra 小部件，但是当我尝试包含 tablesorterPager 时就这样，脚本就死掉了，没有任何错误。

我尝试从表行中删除“隐藏”类，它限制了结果，但不会创建分页控件，如果您尝试排序，结果会消失并且脚本会终止。

$('table').tablesorter({
    widthFixed:true,
    widgets: ['zebra']}
).tablesorterPager({
    container: $("#pager")
});

这是在文档就绪时调用的代码。

在任何给定时间，这里都有一些示例数据行(表排序器之前):

<tr class="place hidden">
    <td class="name">Sample Row 1</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place">
    <td class="name">Sample Row 2</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>
<tr class="place hidden">
    <td class="name">Sample Row 3</td>
    <td>100</td>
    <td>12</td>
    <td>1</td>
    <td>1</td>
    <td>0</td>
</tr>

Answer 1

您必须添加完整的分页器 DOM 结构，如下所示:

  <div id="pager" class="pager">
<form>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/first.png" class="first"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/prev.png" class="prev"/>
  <input type="text" class="pagedisplay"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/next.png" class="next"/>
  <img src="javascript/jqPlugins/tablesorter/addons/pager/icons/last.png" class="last"/>
  <select class="pagesize">
    <option selected="selected"  value="10">10</option>
    <option value="20">20</option>
    <option value="30">30</option>
    <option  value="40">40</option>
  </select>
</form>

另请注意，我下载的 zip 不包含任何图像文件，因为缺少“icons”文件夹。同样令人烦恼的是，zip 包含 svn repo 文件夹。所以你必须添加这个“图标”文件夹和其中的图像文件。您可以从寻呼机的表排序器示例页面下载图像文件。我还必须直接设置图像的路径(请注意，在我的代码示例中我这样做了)。祝你好运!