list js分页单击last按钮使用jquery显示最后一行
list js分页单击last按钮使用jquery显示最后一行
提问于 2018-05-31 15:52:40
我的收藏中有14行，
限制是7。所以，我能看到的每一页是7。
我有四个按钮First，Last，Next，Prev。最后一个按钮的问题。如果我点击最后一个按钮，它会显示最后一行(只有一行)。它应该显示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>
我这里的工作示例是CODEPEN
谢谢
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-05-31 16:16:57
它应该是
$('.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)显示来自i的项目数。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50619338
复制相关文章
相似问题