javascript - 获取上一个/下一个 |使用 list.js 的第一个/最后一个按钮

Question

我正在构建一个带有搜索功能的分页索引。我有索引分页和工作，但是我想添加一个上一个/下一个和一个第一个/最后一个按钮，因为这必须是可扩展的。

List.JS 似乎没有开箱即用的其中之一，因此我尝试通过将 li 附加/添加到 pagination div 中来做到这一点ul。这确实有效，除了点击后它们被删除。

添加到分页div

$('.pagination').prepend('<li class="btn-next"> 9 </li>');

$('.pagination').append('<li class="btn-prev"> 0 </li>');

运行按钮的函数

$('.btn-next').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position+1]).trigger('click');
        }
    })

})

$('.btn-prev').on('click', function(){
    var list = $('.pagination').find('li');
    $.each(list, function(position, element){
        if($(element).is('.active')){
            $(list[position-1]).trigger('click');
        }
    })

在此之后，我什至不确定如何让它们保持附加状态，因为它似乎每次都在点击时重写它。还有其他人使用 List.JS 创建了这些按钮吗？

这是我的 fiddle .

Answer 1

问题是插件会在您每次更改页面时重新加载 html，避免修改插件的一个选项是创建一个额外的容器并将您的元素设置为下一个元素。

HTML 将是这样的:

<div class="nav">
  <ul class="pagination">
  </ul>
</div>

然后添加你的按钮:

$('.nav').append('<div class="btn-next"> > </div><div class="btn-last"> >> </div>');
$('.nav').prepend('<div class="btn-first"> << </div><div class="btn-prev"> < </div>');

Updated Fiddle

_{还在搜索如何触发首页和末页}

---

对于第一个和最后一个元素，使用 show() 函数:

$('.btn-first').on('click', function(){
    monkeyList.show(1,1)
})
$('.btn-last').on('click', function(){
    monkeyList.show(monkeyList.size(),1)
})

Updated Fiddle 2