Paginar al estilo twitter o facebook

• 0
  Jordi Yang Li
  14/11/2015 13:49
  Hola, estoy muy verde con javascript y tengo un código que he conseguido para mi proyecto. dicho código me pagina listas en html (<ul><li></li></ul>)
  
  me los pagina de este modo:
  
  texto 1...
  
  texto 2...
  
  texto 3...
  
  1 | 2 | 3 | 4
  
  Me gustaría conseguir que los paginara así:
  
  texto 1...
  
  texto 2...
  
  texto 3...
  
  Ver más
  
  al estilo twitter o facebook que al clickar en "Ver más" a continuación me mostrara tres mas sin ocultar los tres anteriores quedando así:
  
  texto 1...
  
  texto 2...
  
  texto 3...
  
  texto 4...
  
  texto 5...
  
  texto 6...
  
  Ver más
  
  
  este es el código que tengo con el que logro paginar listas mediante el método tradicional:
  
  (function($){$.fn.quickPagination=function(options){var defaults={pageSize:2,currentPage:1,holder:null,pagerLocation:"after"};var options=$.extend(defaults,options);return this.each(function(){var selector=$(this);var pageCounter=1;selector.wrap("<div class='simplePagerContainer'></div>");selector.parents(".simplePagerContainer").find("ul.simplePagerNav").remove();selector.children().each(function(i){if(i<pageCounter*options.pageSize&&i>=(pageCounter-1)*options.pageSize){$(this).addClass("simplePagerPage"+pageCounter);}
  else{$(this).addClass("simplePagerPage"+(pageCounter+1));pageCounter++;}});selector.children().hide();selector.children(".simplePagerPage"+options.currentPage).show();if(pageCounter<=1){return;}
  var pageNav="<ul class='simplePagerNav'>";for(i=1;i<=pageCounter;i++){if(i==options.currentPage){pageNav+="<li class='currentPage simplePageNav"+i+"'><a rel='"+i+"' href='#'style='padding:7px;'>"+i+"</a></li>";}
  else{pageNav+="<li class='simplePageNav"+i+"'><a rel='"+i+"' href='#' style='padding:7px;'>"+i+"</a></li>";}}
  pageNav+="</ul>";if(!options.holder){switch(options.pagerLocation)
  {case"before":selector.before(pageNav);break;case"both":selector.before(pageNav);selector.after(pageNav);break;default:selector.after(pageNav);}}
  else{$(options.holder).append(pageNav);}
  selector.parent().find(".simplePagerNav a").click(function(){var clickedLink=$(this).attr("rel");options.currentPage=clickedLink;if(options.holder){$(this).parent("li").parent("ul").parent(options.holder).find("li.currentPage").removeClass("currentPage");$(this).parent("li").parent("ul").parent(options.holder).find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");}
  else{$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("li.currentPage").removeClass("currentPage");$(this).parent("li").parent("ul").parent(".simplePagerContainer").find("a[rel='"+clickedLink+"']").parent("li").addClass("currentPage");}
  selector.children().hide();selector.find(".simplePagerPage"+clickedLink).show();return false;});});}})(jQuery);

  Reply

  Responder

  You have to register to coment Register

  Publicar comentario
•  0
  Enrique Quero Vilar
  11/12/2015 12:28
  Pues solo tienes que buscar el lugar donde al cambiar de página modificas el contenido de un div o un contenedor, y en vez de sustituirlo, añadirlo al final ( append )

  Reply