Question

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

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

喜欢$（“table”）。tablesorter（{......}）

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

没有箭头正在工作。当我只保留一张桌子时。它工作正常。到目前为止，我尝试了一切但失败了任何人都可以提供帮助。

谢谢！

Answer 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' });

Answer 2

我对同一个问题感到震惊，因为我总是担心尽可能通用，所以我制作了这个简单的代码，为表格提供ID，编号与代码中的编号相同，并将特定的寻呼机应用于他们每个人。

<强> JS

  $(".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 -->

希望它有所帮助。

Answer 3

您可以使用表格分类器将多个表合并在一起。请参考这个。 http://www.pearlbells.co.uk/table-pagination/

表分类器寻呼机不在页面中使用多个表。只有第10项可见

3 个答案: