列表 JS 分页 单击"最后"按钮 使用 jQuery 显示最后一行



我的收藏中有 14 行,

限制为 7。所以,每一页我都能看到7。

我有四个按钮 第一,最后,下一个,上一页。最后一个按钮的问题。如果我单击最后一个按钮,它会显示最后一行(仅一行(。它应该显示 7。

var monkeyList = new List('test-list', {
valueNames: ['name'],
page: 7,
pagination: true
});
$('.text-center').append('<div class="btn-next"> > </div><div class="btn-last"> >| </div>');
$('.text-center').prepend('<div class="btn-first"> |< </div><div class="btn-prev"> < </div>');

$('.btn-next').on('click', function(){
$('.pagination .active').next().trigger('click');
})
$('.btn-prev').on('click', function(){
$('.pagination .active').prev().trigger('click');
})
$('.btn-first').on('click', function(){
monkeyList.show(1,7);
})
$('.btn-last').on('click', function(){
monkeyList.show(monkeyList.size(),7);
})
.pagination li {
display:inline-block;
padding:5px;
}
.btn-last, .btn-first, .btn-prev, .btn-next, .pagination li a {
float: left;
border: 1px solid #424242;
padding: 2px 10px;
margin: 2px;
border-radius: 4px;
cursor: pointer;
color: #e0e0e0;
text-decoration: none;
width: 35px;
background-color: #565656;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>  
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>

<div id="test-list">
<input type="text" class="search" />
<ul class="list">
<li><p class="name">Guybrush Threepwood</p></li>
<li><p class="name">Elaine Marley</p></li>
<li><p class="name">LeChuck</p></li>
<li><p class="name">Stan</p></li>
<li><p class="name">Voodoo Lady</p></li>
<li><p class="name">Herman Toothrot</p></li>
<li><p class="name">Meathook</p></li>
<li><p class="name">Carla</p></li>
<li><p class="name">Otis</p></li>
<li><p class="name">Rapp Scallion</p></li>
<li><p class="name">Rum Rogers Sr.</p></li>
<li><p class="name">Men of Low Moral Fiber</p></li>
<li><p class="name">Murray</p></li>
<li><p class="name">Cannibals</p></li>
</ul>
<div class="text-center">
<ul class="pagination"></ul>
</div>
</div>

我的工作示例在这里 代码笔

感谢

它应该是

$('.btn-last').on('click', function(){
var total = monkeyList.size(),
page = (total % 7) || 7, // the reminder or full page
start = total - page + 1 ; // calculate last page first item
monkeyList.show(start, 7);
})

工作示例

文档

show(i, page)显示pagei中的项目数。

最新更新