Este foro ya no está activo, así que no puedes publicar nuevas preguntas ni responder a las preguntas existentes.

Paginar al estilo twitter o facebook

14 de noviembre de 2015

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