Getting preview / next | first / last button to work with list.js
I am creating a split index with search. I have the index paginated and working, however I want to add a prev / next and first / last button because it needs to be scalable.
List.JS doesn't seem to have one of these out of the box, so I tried to do this by adding / adding li
to the pagination
div ul. This works, except that when clicked, they are removed.
Adding a pagination div
$('.pagination').prepend('<li class="btn-next"> 9 </li>');
$('.pagination').append('<li class="btn-prev"> 0 </li>');
Functions for triggering buttons
$('.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');
}
})
After this Im not sure how I can get them to stay added as it seems like they are overwriting it every time they click. Has anyone else created these buttons using List.JS?
Here is my fiddle .
source to share
The problem is that the plugin reloads the html every time you change the page, one option to avoid changing the plugin would be to create an additional container and style your elements the following different.
The HTML will look like this:
<div class="nav">
<ul class="pagination">
</ul>
</div>
Then add buttons:
$('.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
Continue searching how to start the first and last page
For the first and last elements, the function is used show()
:
$('.btn-first').on('click', function(){
monkeyList.show(1,1)
})
$('.btn-last').on('click', function(){
monkeyList.show(monkeyList.size(),1)
})
Updated Fiddle 2
source to share