Question

我有一系列动态生成的表，每个表都在其自己的选项卡中。表排序和分页功能在单独的表上运行良好。

虽然我似乎可以使用以下方法将自定义寻呼机添加到一个表中：

$.tablesorter.customPagerControls

如果我尝试在循环遍历表的$ .each循环中使用它，则抛出一个未定义的错误。

$('.results-panel').find("table").each(function (){
    var id = $(this).attr("id");
    var pagerID = $(this).attr("data-pagerID");
    //apply table sorter to each, then find the nearest .pager
    $("#"+id).tablesorter().tablesorterPager({container: $("#"+pagerID)});
});

如果我只将自定义寻呼机应用于一个表，则可以正常工作。

对我来说，主要问题是你需要在调用自定义控件时指定表和寻呼机ID，然后在循环中调用它，我可以在其中设置ID，它会失败。

Answer 1

自定义寻呼机控件脚本中似乎存在错误。它现在已在working branch内修复。

Here is a demo：

CSS

.left {
    float: left;
}
.right {
    float: right;
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
}
.pager .prev, .pager .next, .pagecount {
    cursor: pointer;
}
.pager a {
    text-decoration: none;
    color: black;
}
.pager a.current {
    color: #0080ff;
}

脚本

$('#table1, #table2').each(function () {
    var $table = $(this),
        $pager = $table.find('.pager');

    $.tablesorter.customPagerControls({
        // point at correct table (string or jQuery object)
        table: $table,
        // pager wrapper (string or jQuery object)
        pager: $pager,
        // container for page sizes
        pageSize: '.left a',
        // container for page selectors
        currentPage: '.right a',
        // number of pages to show of either end
        ends: 2,
        // number of pages surrounding the current page
        aroundCurrent: 1,
        // page element; use {page} to include the page number
        link: '<a href="#">{page}</a>',
        // current page class name
        currentClass: 'current',
        // spacer for page numbers next to each other
        adjacentSpacer: ' | ',
        // spacer for page numbers away from each other (ellipsis &hellip;)
        distanceSpacer: ' \u2026 ',
        // add left/right keyboard arrows to change current page
        addKeyboard: false
    });

    $table
        .tablesorter({
            theme: 'blue'
        })
        .tablesorterPager({
            container: $pager
        });
});

HTML

<table id="table1">
    <thead>
        <tr>
            <!-- ... -->
        </tr>
    </thead>
    <tfoot>
        <tr>
            <!-- ... -->
        </tr>
        <tr>
            <td colspan="7"> <!-- match # col -->
                <div class="pager"> <span class="left">
                    # per page:
                    <a href="#" class="current">10</a> |
                    <a href="#">25</a> |
                    <a href="#">50</a> |
                    <a href="#">100</a>
                </span>
                <span class="right">
                    <span class="prev">
                        <img src="prev.png" /> Prev&nbsp;
                    </span>
                    <span class="pagecount"></span> &nbsp;
                    <span class="next">Next <img src="next.png" />
                    </span>
                </span>
            </div>
        </td>
    </tr>
</tfoot>
<tbody>
    <!-- ... -->
</tbody>
</table>

<table id="table2">
    <thead>
        <tr>
            <!-- ... -->
        </tr>
    </thead>
    <tfoot>
        <tr>
            <!-- ... -->
        </tr>
        <tr>
            <td colspan="7"> <!-- match # col -->
                <div class="pager"> <span class="left">
                    # per page:
                    <a href="#" class="current">10</a> |
                    <a href="#">25</a> |
                    <a href="#">50</a> |
                    <a href="#">100</a>
                </span>
                <span class="right">
                    <span class="prev">
                        <img src="prev.png" /> Prev&nbsp;
                    </span>
                    <span class="pagecount"></span> &nbsp;
                    <span class="next">Next <img src="next.png" />
                    </span>
                </span>
            </div>
        </td>
    </tr>
</tfoot>
<tbody>
    <!-- ... -->
</tbody>
</table>

Answer 2

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

我认为您应该考虑插入一个类（因为您已经有表的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("class","table-sorter-"+pageTableCount);

    // Does the same with the pager
    pager = table.parent().find(".tablesorter-pager");
    pager.attr("class","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 -->

希望它有所帮助。

将自定义页面应用于选项卡中的多个表

2 个答案: