Question

我目前在一个表格中有一个大的结果集，我正在申请并根据页面中的其他过滤器删除某些“隐藏”（display：none）到某些行。我能够让tablesorter使用zebra小部件，但是当我尝试在其上包含tablesorterPager时，脚本会在没有任何错误的情况下死掉。

我尝试从表行中删除'hidden'类，但它限制了结果，但是没有创建分页控件，如果你尝试排序，结果就会消失，脚本就会死掉。

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

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

在任何给定时间，这里有一些示例数据行（pre-tablesorter）：

<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文件夹。所以你必须添加这个'icons'文件夹和图像文件。您可以从寻呼机的tablesorter示例页面下载图像文件。我还必须将我的路径直接设置为图像（在我的代码示例中注意我这样做）。祝你好运！

Answer 2

            this.construct = function(settings) {

            return this.each(function() {   

                config = $.extend(this.config, $.tablesorterPager.defaults, settings);

                var table = this, pager = config.container;

                $(this).trigger("appendCache");

                config.size = parseInt($(".pagesize",pager).val());

                $(config.cssFirst,pager).click(function() {
                    moveToFirstPage(table);
                    return false;
                });
                $(config.cssNext,pager).click(function() {
                    moveToNextPage(table);
                    return false;
                });
                $(config.cssPrev,pager).click(function() {
                    moveToPrevPage(table);
                    return false;
                });
                $(config.cssLast,pager).click(function() {
                    moveToLastPage(table);
                    return false;
                });
                $(config.cssPageSize,pager).change(function() {
                    setPageSize(table,parseInt($(this).val()));
                    return false;
                });

这是tableSorter寻呼机插件的构造函数。正如您所看到的，它将click函数绑定到基于配置的元素（cssFirst，cssNext，cssPrev，cssLast）。不幸的是，这意味着那些元素必须已经存在于'config.container'定义的容器中。这似乎没有记录在寻呼机插件网站的任何地方。但是你必须使用以下默认类来定义（在html中，或者在调用pager函数之前使用javascript）元素：

            cssNext: '.next',
            cssPrev: '.prev',
            cssFirst: '.first',
            cssLast: '.last',

我不确定表格分类器如何与隐藏的行进行交互，您可能需要对核心tableSorter功能进行一些修改以获得您正在寻找的行为。

/克里斯

使用tablesorterPager和隐藏行的jQuery tablesorter

2 个答案: