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

Question

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

List.JS似乎没有这些开箱即用,所以我尝试通过将lis 附加/前置到paginationdiv 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创建这些按钮？

这是我的小提琴.

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>');

更新小提琴

_{仍在搜索如何触发第一页和最后一页}

对于First和Last元素,使用以下show()函数:

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

更新小提琴2