Paginar al estilo twitter o facebook
Publicado por matuha (6 intervenciones) el 14/11/2015 14:36:20
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:
Me gustaría conseguir que los paginara así:
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í:
este es el código que tengo con el que logro paginar listas mediante el método tradicional:
me los pagina de este modo:
1
2
3
4
5
6
7
texto 1...
texto 2...
texto 3...
1 | 2 | 3 | 4
Me gustaría conseguir que los paginara así:
1
2
3
4
5
6
7
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í:
1
2
3
4
5
6
7
8
9
10
11
12
13
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:
1
2
3
4
5
6
7
8
9
10
(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);
Valora esta pregunta
0