将自定义分页器应用于选项卡中的多个表 [英] 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

如果我尝试在遍历表的$ .each循环中使用它，则会引发未定义的错误.

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.

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

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.

推荐答案

自定义寻呼机控件脚本中似乎存在一个错误.现在已在工作分支.

There appears to be a bug in the custom pager controls script. It is now fixed within the working branch.

这是一个演示:

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>

这篇关于将自定义分页器应用于选项卡中的多个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！