paginar

[mj1984]

Hola. Tengo una página hecha en html y utilizando funciones javascript. A la izquierda tengo un menú y en la parte central-derecha van apareciendo los contenidos según el menú seleccionado. Al pulsar sobre uno de los menús, a la derecha me aparece una serie de textbox y combobox demasiado larga. Me gustaría saber si es posible paginar esto, por ejemplo, cada 10 elementos. ¿Alguien sabría cómo hacerlo? Gracias foreros.

[caricatos]

Hola:

Los sistemas de paginación suelen ser por capas, aunque podrían existir variantes. La idea sería, tener una capa para el menú de paginación con sus respectivos números, o si se quiere con botones/enlaces de inicio, fin, anterior y siguiente, y luego con cada grupo de elementos una capa, cuidando tener la primera visible y el resto no.

Lo que pasa con esto de la paginación con javascript, es que si los datos los traes desde otro lenguaje (del servidor), la presentación es mejor hacerla desde ese lenguaje.

Saludos

[mj1984]

Iniciado por caricatos

Hola:

Los sistemas de paginación suelen ser por capas, aunque podrían existir variantes. La idea sería, tener una capa para el menú de paginación con sus respectivos números, o si se quiere con botones/enlaces de inicio, fin, anterior y siguiente, y luego con cada grupo de elementos una capa, cuidando tener la primera visible y el resto no.

Lo que pasa con esto de la paginación con javascript, es que si los datos los traes desde otro lenguaje (del servidor), la presentación es mejor hacerla desde ese lenguaje.

Saludos

Tengo el siguiente código para paginar el contenido de una tabla.

Código:

function paginador(tableName, itemsPerPage) {
    this.tableName = tableName;
    this.itemsPerPage = itemsPerPage;
    this.currentPage = 1;
    this.pages = 0;
    this.inited = false;

    this.showRecords = function(from, to) {
        var rows = document.getElementById(tableName).rows;
        // Comienza desde 1 para no tener en cuenta la cabecera de la tabla
        for (var i = 1; i < rows.length; i++) {
            if (i < from || i > to)
                rows[i].style.display = 'none';
            else
                rows[i].style.display = '';
        }
    }

    this.showPage = function(pageNumber) {
        if (! this.inited) {
            alert("not inited");
            return;
        }

        var oldPageAnchor = document.getElementById('pg' + this.currentPage);
        oldPageAnchor.className = 'pg-normal';

        this.currentPage = pageNumber;
        var newPageAnchor = document.getElementById('pg' + this.currentPage);
        newPageAnchor.className = 'pg-seleccionado';

        var from = (pageNumber - 1) * itemsPerPage + 1;
        var to = from + itemsPerPage - 1;
        this.showRecords(from, to);
    }

    this.prev = function() {
        if (this.currentPage > 1)
            this.showPage(this.currentPage - 1);
    }

    this.next = function() {
        if (this.currentPage < this.pages) {
            this.showPage(this.currentPage + 1);
        }
    }

    this.init = function() {
        var rows = document.getElementById(tableName).rows;
        var records = (rows.length - 1);
        this.pages = Math.ceil(records / itemsPerPage);
        this.inited = true;
    }

    this.showPageNav = function(pagerName, positionId) {
        if (! this.inited) {
            return;
        }
        var element = document.getElementById(positionId);

        var pagerHtml = '<span onclick="' + pagerName + '.prev();" class="pg-normal"> « Anterior </span> | ';
        for (var page = 1; page <= this.pages; page++)
        {
            pagerHtml += '<span id="pg' + page + '" class="pg-normal" onclick="' + pagerName + '.showPage(' + page + ');">' + page + '</span> | ';            
        }
        pagerHtml += '<span onclick="' + pagerName + '.next();" class="pg-normal"> Siguiente »</span>';
        
        element.innerHTML = pagerHtml;
    }
}

La paginación hace que bajo la tabla aparezcan los vínculos así:
<<Anterior | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Siguiente >>
En el caso de que hubiera 9 páginas. Me gustaría que:
- Si me sitúo en la página 1, me desaparezca el vínculo ‘Anterior’.
- Si me sitúo en la página 9 (última página), me desaparezca el vínculo de ‘Siguiente’.
- En lugar de aparecerme un vínculo para cada página, me aparezcan de 3 en 3, es decir, así:
<<Anterior | 1 | 2 | 3 | … Siguiente >> y que al pulsar sobre el 2 pues quedara así:
<<Anterior … | 2 | 3 | 4 | … Siguiente >>
Espero haberme explicado.
Gracias de antemano.