List.js分页Last按钮异常：点击仅显最后一行而非7行

你遇到的问题很典型——自定义的Last按钮点击后只显示最后1条数据，而非预期的最后一页7条内容。咱们先来理清楚问题出在哪：

错误原因 #

你当前调用monkeyList.show(monkeyList.size(),7)时，对List.js的show()方法参数理解有误：

• show(startIndex, pageSize)的第一个参数是要显示的起始项的索引（从1开始计数），而不是最后一项的索引。
• 当你传入monkeyList.size()（也就是14）作为起始索引时，List.js会从第14条数据开始尝试显示7条，显然后面没有更多数据了，所以只会显示第14条这1条内容。

修正方案 #

我们需要计算出最后一页的起始索引，公式是：总数据数 - 每页条数 + 1。对应到你的场景就是14-7+1=8，调用show(8,7)就能显示第8到14条，也就是最后一页的全部7条数据。

把Last按钮的点击事件代码修改为：

$('.btn-last').on('click', function(){
  const pageSize = monkeyList.page; // 获取每页显示条数
  const totalItems = monkeyList.size(); // 获取总数据量
  const startIndex = totalItems - pageSize + 1; // 计算最后一页的起始索引
  monkeyList.show(startIndex, pageSize);
})

这样修改后，点击Last按钮就能正确跳转到最后一页并显示完整的7条数据了。

完整修正后的JS代码 #

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, monkeyList.page); 
}) 

// 修正后的Last按钮逻辑
$('.btn-last').on('click', function(){
  const pageSize = monkeyList.page;
  const totalItems = monkeyList.size();
  const startIndex = totalItems - pageSize + 1;
  monkeyList.show(startIndex, pageSize);
})

补充优化 #

为了让代码更健壮，建议把固定的7换成monkeyList.page，这样如果后续修改每页显示条数，不需要手动修改多处代码（比如上面的First按钮已经做了替换）。

内容的提问来源于stack exchange，提问作者Ashok Charu