表分页-li的追加不正确
表分页-li的追加不正确
提问于 2013-01-04 02:29:21
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>。
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-01-04 04:26:38
多次调用pagination()将不起作用，因为您没有解除事件绑定，而且是附加到<div id="pager">，而不是替换内容。
此外，如果您有多个分页表，它们都会尝试向同一个<div id="pager">添加一个ul。通过在表中指定分页器的目标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/
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14144929
复制相关文章
相似问题
腾讯云开发者
