获得 prev/next | first/last 按钮可用于 list.js

Question

我正在构建一个带有搜索功能的分页索引。我对索引进行了分页并且可以正常工作，但是我想添加一个 prev/next 和一个 first/last 按钮，因为这必须是可扩展的。

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

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

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

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

获得 prev/next | first/last 按钮可用于 list.js

Getting a prev/next | first/last button to work with list.js

javascript

jquery

pagination

list

list.js

Updated Fiddle

Updated Fiddle 2