Question

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

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

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

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

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

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

1 个答案:

Updated Fiddle

Updated Fiddle 2