Appying a custom pager to multiple tables in tabs

Question

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.

Answer 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>