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

Question

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

List.JS 似乎没有开箱即用的其中之一，所以我尝试通过将lis 附加/前置到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

_{还在寻找如何触发第一页和最后一页}

---

对于 First 和 Last 元素，使用 show() 函数：

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

Updated Fiddle 2