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);