0 
function pagination() {     
 $('.paginated').each(function() {
    var currentPage = 0;
    var numPerPage = $("#instancesPerPage").val();
    var $table = $(this);
    $table.bind('repaginate', function() {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });
    $table.trigger('repaginate');
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);
    var $pager = $('<ul></ul>');

    for (var page = 0; page < numPages; page++) {
    var pageUrl = '<a href="#">' + page + '</a>';
        $('<li></li>').html(pageUrl).on('click', {
            newPage: page
        }, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager);    
    }
    $pager.appendTo('#pager');
    $("ul li:first-child").addClass('active');
 });
};

如果我的表有 8 行并且我的 numPerPage.value 为 2，则上述函数将产生以下结果：

<div class="pagination-instances pagination-small pagination-right" id="pager">
    <ul></ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>

在选择另一个 numPerPage.value 时调用以下函数：

 $('#instancesPerPage').on("change", function() {
  pagination();
 });

我的表格页面更改为正确的 numPerPage.value 但 li 没有正确更新并变得一团糟。

<div class="pagination-instances pagination-small pagination-right" id="pager">
    <ul></ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
    </ul>
    <ul>
        <li class="active"><a href="#">0</a></li>
        <li><a href="#">1</a></li>
    </ul>
</div>

显然这与我正在使用的 appendTo 有关系，但我不知道如何纠正它。我也不知道为什么会有一个空的<ul></ul>.

4

1 回答 1

1

多次调用 pagination() 将不起作用，因为您没有取消绑定事件，而是附加<div id="pager">而不是替换内容。

此外，如果您有多个分页表，它们都尝试将 a 添加ul到同一个<div id="pager">. 通过为表中的分页器指定目标 div，您可以拥有多个分页表和多个分页器。

<select id="instancesPerPage">
    <option value="2">2</option>
    <option value="5">5</option>
    <option value="8">8</option>
    <option value="100">100</option>
    <option value="999999999">All</option>
</select> Instances per page

<table data-provide="pagination" data-pager="#pager">
    <tr><td>Row 1</td></tr>
    <tr><td>Row 2</td></tr>
    <tr><td>Row 3</td></tr>
    <tr><td>Row 4</td></tr>
    <tr><td>Row 5</td></tr>
    <tr><td>Row 6</td></tr>
    <tr><td>Row 7</td></tr>
    <tr><td>Row 8</td></tr>
</table>

<div class="pagination pagination-small" id="pager"></div>

<table data-provide="pagination" data-pager="#pager2">
    <tr><td>ABC 1</td></tr>
    <tr><td>ABC 2</td></tr>
    <tr><td>ABC 3</td></tr>
    <tr><td>ABC 4</td></tr>
    <tr><td>ABC 5</td></tr>
    <tr><td>ABC 6</td></tr>
    <tr><td>ABC 7</td></tr>
    <tr><td>ABC 8</td></tr>
</table>

<div class="pagination pagination-small" id="pager2"></div>
​

使用js

function pagination() {
 $('table[data-provide=pagination]').each(function() {
    var $table = $(this);
    var $pager = $('<ul></ul>');

    var currentPage = 0;
    var numPerPage = $("#instancesPerPage").val();
    var numRows = $table.find('tbody tr').length;
    var numPages = Math.ceil(numRows / numPerPage);

    $table.unbind('repaginate');

    $table.bind('repaginate', function() {
        $table.find('tbody tr').hide().slice(currentPage * numPerPage, (currentPage + 1) * numPerPage).show();
    });

    for (var page = 0; page < numPages; page++) {
        var link = '<a href="#">' + page + '</a>';

        $('<li></li>').html(link).on('click', { newPage: page}, function(event) {
            currentPage = event.data['newPage'];
            $table.trigger('repaginate');
            $(this).addClass('active').siblings().removeClass('active');
        }).appendTo($pager);    
    }

    $pager.find("li:first-child").addClass('active');

    $($table.data('pager')).html($pager);
    $table.trigger('repaginate');
 });
};

pagination();

$('#instancesPerPage').on("change", function() {
 pagination();
});
​

http://jsfiddle.net/gZmWh/10/

于 2013-01-03T20:26:38.367 回答