Appying a custom pager to multiple tables in tabs

问题

I have a series of dynamically generated tables, each one in it's own tab. The table sort and paging functions work fine on separate tables.

While it seems that I can add a custom pager to one table using:

$.tablesorter.customPagerControls

It throws an undefined error if I try to use it in the $.each loop that iterates through the tables.

$('.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)});
});

If I only apply the custom pager to one table, it works.

The main issue for me is that you need to specify the table and pager IDs when you call the custom controls, yet calling it in a loop, where I can set the IDs, it fails.

回答1:

There appears to be a bug in the custom pager controls script. It is now fixed within the 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;
}

Script

$('#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>

回答2:

I was struck in the same issue, and since I'm always concerned about being as generic as possible, I made this simple code that gives IDs to tables, numbered as they appear in the code, and apply the specific pager to each of them.

I Think you should consider inserting a class (since you already have IDs for tables) and selecting them.

Also, I'm considering the pagination as a sibling of the table.

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

Hope it helps.

来源：https://stackoverflow.com/questions/25805547/appying-a-custom-pager-to-multiple-tables-in-tabs

标签

jquery

tablesorter