Estoy construyendo un índice paginado con búsqueda. Tengo el índice paginado y funcionando, sin embargo, quiero agregar un botón anterior/siguiente y uno primero/último porque esto tiene que ser escalable.
List.JS no parece tener uno de estos listos para usar, así que traté de hacerlo agregando/anteponiendo los li s en el div ul de pagination . Esto funciona, excepto que después de hacer clic se eliminan.
Agregar en div de paginación
$('.pagination').prepend('<li class="btn-next"> 9 </li>'); $('.pagination').append('<li class="btn-prev"> 0 </li>');Funciones para ejecutar los botones
$('.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'); } })Después de esto, no estoy seguro de cómo puedo hacer que permanezcan adjuntos, ya que parece volver a escribirlo al hacer clic cada vez. ¿Alguien más ha creado estos botones usando List.JS?
Aquí está mi violín .
El problema es que el complemento recarga el html cada vez que cambia la página, una opción para evitar modificar el complemento será crear un contenedor adicional y diseñar sus elementos para que estén al lado del otro.
El HTML será como:
<div class="nav"> <ul class="pagination"> </ul> </div>Y luego agregue sus botones:
$('.nav').append('<div class="btn-next"> > </div><div class="btn-last"> >> </div>'); $('.nav').prepend('<div class="btn-first"> << </div><div class="btn-prev"> < </div>');Sigo buscando cómo activar la primera y la última página
Para los elementos Primero y Último, utilice la función show() :
$('.btn-first').on('click', function(){ monkeyList.show(1,1) }) $('.btn-last').on('click', function(){ monkeyList.show(monkeyList.size(),1) })