表格分页器分页器不适用于页面中的多个表格。只有第 10 个项目可见答案

【问题标题】：table sorter pager not working with multiple tables in page. Only 1st 10 item visible表格分页器分页器不适用于页面中的多个表格。只有第 10 个项目可见
【发布时间】：2014-01-14 19:58:20
【问题描述】：

您好，我正在使用带有 bootstrap 3 的表格排序器该插件的网址是 http://mottie.github.io/tablesorter/docs/

当页面中只有一个表格时一切正常。我读完之后 http://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html

like $("table").tablesorter({......})

但是当有多个表格在同一个页面中时，寻呼机不起作用。箭头被禁用，奇怪的是只有前 10 个项目可见。似乎 tablesorter 在排序工作时激活，但分页不起作用。

没有箭头在起作用。当我只保留一张桌子时。它工作正常。到目前为止，我尝试了一切，但失败了。谁能帮忙。

谢谢！

【问题讨论】：

请提供JSFiddle 显示您的问题的示例。

标签： twitter-bootstrap-3 tablesorter

【解决方案1】：

我想我在tablesorter issue 中回答了你的问题。基本上，确保每个寻呼机为其指定的表都有一个唯一的名称。

<table class="table1">...<table>
<div class="pager1">...</div>

<table class="table2">...<table>
<div class="pager2">...</div>

然后分别初始化每个表

$(".table1").tablesorter().tablesorterPager({ container: '.pager1' });
$(".table2").tablesorter().tablesorterPager({ container: '.pager2' });

【讨论】：

【解决方案2】：

我对同样的问题感到震惊，因为我总是关心尽可能通用，所以我编写了这个简单的代码，它为表格提供 ID，按照它们在代码中出现的编号，并将特定的寻呼机应用于他们每个人。

  $(".tablesorter table").each(function(pageTableCount){

    // Check if pageTableCount was initialized, and add 1 to its value
    pageTableCount !==null ? pageTableCount++ : 1;

    // Get the table and add ID with counter
    table = $(this);
    table.attr("id","table-sorter-"+pageTableCount);

    // Does the same with the pager
    pager = table.parent().find(".tablesorter-pager");
    pager.attr("id","table-sorter-pager-"+pageTableCount);

    // Initiate the tablesorter
    table.tablesorter()
    .tablesorterPager({
      container: "#table-sorter-pager-"+pageTableCount
    });

  });

HTML (BS + FontAwesome)

        <div class="table-responsive tablesorter">
          <table class="table">
            <thead>
              <tr>
                ...
              </tr>
            </thead>
            <tbody>

              <tr>
                ...
              </tr>

            </tbody>
          </table>
          <div class="tablesorter-pager">
            <a href="#" class="first btn btn-default btn-sm btn-icon"><i class="fa fa-angle-double-left"></i></a>
            <a href="#" class="prev btn btn-default btn-sm btn-icon"><i class="fa fa-angle-left"></i></a>
            <span class="pagedisplay"></span>
            <a href="#" class="next btn btn-default btn-sm btn-icon"><i class="fa fa-angle-right"></i></a>
            <a href="#" class="last btn btn-default btn-sm btn-icon"><i class="fa fa-angle-double-right"></i></a>
          </div><!-- tablesorter-pager -->
        </div><!-- .table-responsive -->

希望对你有帮助。

【讨论】：

【解决方案3】：

您可以使用表格排序器将多个表格合二为一。请参考这里。 http://www.pearlbells.co.uk/table-pagination/

【讨论】：

请注意 link-only answers 是不鼓励的，所以答案应该是寻找解决方案的终点（与另一个中途停留的参考相比，随着时间的推移往往会变得陈旧）。请考虑在此处添加独立的概要，并保留链接作为参考。