0

Me está pasando algo que no comprendo al hacer un paginador con boostrap. La idea es hacer un paginador parecido al que se ve en esta página (Working with icons).

introducir la descripción de la imagen aquí

https://getbootstrap.com/docs/4.1/components/pagination/

Con la diferencia de que el mio también tiene la opción de ir a la primera página y la última.

Para hacerlo estoy usando este código que en lo que a lo que a funcionamiento se refiere lo hace bastante bien.

var paginador;            //Referencia el elemento
var totalPaginas;         //Se debe calcular
var itemsPorPagina = 6;   //Elementos a mostrar desde la base de datos
var numerosPorPagina = 3; //Cantidad maxima de enlaces visibles en el paginador

function creaPaginador(totalItems)
{           

    //Obtener la referencia el elemento
    paginador = $(".pagination");

    //Calcular el numero de paginas para el paginador
    totalPaginas = Math.ceil(totalItems/itemsPorPagina);

    ///Enlace que lleva a la primera página
    $('<li class="page-item"><a href="#" class="first_link"><</a></li>').appendTo(paginador);

    //Enlace que lleva a la página previa       
    $('<li class="page-item"> <a href="#" aria-label="Previous" class="prev_link"> <span aria-hidden="true">&laquo;</span> </a> </li>').appendTo(paginador);    

    var pag = 0;
    while(totalPaginas > pag)
    {
        //Enlace que lleva a la página seleccionada 
        $('<li class="page-item"><a href="#" class="page-link">'+(pag+1)+'</a></li>').appendTo(paginador);
        pag++;
    }


    if(numerosPorPagina > 1)
    {
        //Oculta toda la lista de paginador
        $(".page-link").hide();
        //Muestra el primer y el último elemento (first y last)
        $(".page-link").slice(0,numerosPorPagina).show();
    }

    //Enlace que lleva a la página siguiente
    $('<li class="page-item"> <a href="#" aria-label="Next" class="next_link"> <span aria-hidden="true">&raquo;</span> </a> </li>').appendTo(paginador);
    //Enlace que lleva a la última página
    $('<li class="page-item"><a href="#" class="last_link">></a></li>').appendTo(paginador);

    //Añade la clase "active" al primer elemento del paginador que tenga la clase ".page-link"
    paginador.find(".page-link:first").addClass("active");
    //Añade la clase "active" al primer elemento de la lista de enlaces del paginador
    paginador.find(".page-link:first").parents("li").addClass("active");

    //Esconde el enlace a página previa
    paginador.find(".prev_link").hide();

    //Carga la página al hacer click en el enlace
    paginador.find("li .page-link").click(function()
    {
        var irpagina =$(this).html().valueOf()-1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la primera página
    paginador.find("li .first_link").click(function()
    {
        var irpagina =0;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la página previa
    paginador.find("li .prev_link").click(function()
    {
        var irpagina =parseInt(paginador.data("pag")) -1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la siguiente página
    paginador.find("li .next_link").click(function()
    {
        var irpagina =parseInt(paginador.data("pag")) +1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la última página
    paginador.find("li .last_link").click(function()
    {
        var irpagina =totalPaginas -1;
        cargaPagina(irpagina);
        return false;
    });

    cargaPagina(0);

}



function cargaPagina(pagina) ///aqui esta lo de undefined
{

    ///calcular desde donde se leerá la base de datos
    var desde = pagina * itemsPorPagina;


    ///llamada al archivo PHP que lee la base de datos para leer los datos de la tabla productos
    $.ajax({
        data:{"param1":"datos","limit":itemsPorPagina,"offset":desde},
        type:"GET",
        ///dataType:'json',
        url:"pagination.php"
    }).done(function(data,textStatus,jqXHR)
    {
        ///alert(data); 
        var lista = data.lista;

        $("#productos").html("");
        ///$("#texto_productos").html("PRODUCTOS CONATAL");
        ///borrarForms("", "PRODUCTOS CONATAL")


        $.each(lista, function(ind, elem)
        {
            ///creaItemProducto(elem);               
        });

    }).fail(function(jqXHR,textStatus,textError)
    {
        alert("Error al realizar la peticion dame " + textError);

    });

    if(pagina >= 1)
    {
        //Muestra el enlace a página previa
        paginador.find(".prev_link").show();
    }
    else
    {
        //Oculta el enlace a página previa
        paginador.find(".prev_link").hide();
    }


    if(pagina < totalPaginas - 1)
    {
        //Muestra el enlace a página siguiente
        paginador.find(".next_link").show();
    }
    else
    {
        //Oculta el enlace a página siguiente
        paginador.find(".next_link").hide();
    }

    //Obtiene el número de página sellecionada (current)
    paginador.data("pag",pagina);

    if(numerosPorPagina>1)
    {
        //oculta todos los enlces
        $(".page-link").hide();

        if(pagina < (totalPaginas - numerosPorPagina))
        {
            //Muestra todos los enlaceas a parir de la página seleccionada en adelante???
            $(".page-link").slice(pagina,numerosPorPagina + pagina).show();
        }
        else
        {                   
            if(totalPaginas > numerosPorPagina)
                //Muestra todos los enlaceas a parir de la página seleccionada en adelante???
                $(".page-link").slice(totalPaginas - numerosPorPagina).show();
            else
                $(".page-link").slice(0).show();//Muestra el primer enlace

        }
    }


    //Quita la clase "active" de todos los elementos
    paginador.children().removeClass("active");
    //Pone la clase "active" a....???
    paginador.children().eq(pagina+2).addClass("active");
    /**/
}


$(function()
{

    ///llamada al archivo PHP que lee la base de datos para saber "cuantos" registros tiene la tabla
    $.ajax({

        data:{"param1":"cuantos"},
        type:"GET",
        ///dataType:"json", 
        url:"pagination.php"

    }).done(function(data,textStatus,jqXHR)
    {
            var total = data.total;
            creaPaginador(total);    

    }).fail(function(jqXHR,textStatus,textError)
    {
        alert("Error al realizar la peticion cuantos (" + textError + ") " + textStatus);
    });

});

El problema es mas bien gráfico, porque mi pagianador tiene este aspecto:

introducir la descripción de la imagen aquí

Como se puede ver el enlace que lleva a la primera página y el Previous no tienen muy buen aspecto... aunque funcionar funcionan correctamente. A no ser que intente hacer lo mismo que dice la página de bootstrap

<a class="page-link" href="#" aria-label="Previous">

(añadir class="page-link") que en cuyo caso se ve correctamente pero deja de funcionar como debería.

Para que no tengan que leer todo el código añado que lo que está dando problemas está dentro de la función.

function creaPaginador(totalItems)

Mas concretamente estas dos lineas:

///Enlace que lleva a la primera página
$('<li class="page-item"><a href="#" class="first_link"><</a></li>').appendTo(paginador);

//Enlace que lleva a la página previa       
$('<li class="page-item"> <a href="#" aria-label="Previous" class="prev_link"> <span aria-hidden="true">&laquo;</span> </a> </li>').appendTo(paginador); 

¿Alguna idea de como solucionar esto?

1 respuesta 1

2

Al final averigüe que la culpa es de Boostrap... hiceiron cambios de una versión a otra y el paginador que antes funcionaba dejó de funcionar. Lo que hice basicamnte fue no usar Boostrap y hacer el mio propio con CSS y así pude aprovechar el código de JavaScript de ahí arriba...

La cosa quedó así:

Código HTML:

<nav aria-label="Page navigation example">
  <ul class="pagination justify-content-center">
  </ul>
</nav>

Código JavaScript:

var paginador;            //Referencia el elemento
var totalPaginas;         //Se debe calcular
var itemsPorPagina = 6;   //Elementos a mostrar desde la base de datos
var numerosPorPagina = 3; //Cantidad maxima de enlaces visibles en el paginador
var current_paginator_item=1;


function creaPaginador(totalItems)
{           

    //Obtener la referencia el elemento
    paginador = $(".pagination");

    //Calcular el numero de paginas para el paginador
    totalPaginas = Math.ceil(totalItems/itemsPorPagina);

    ///Enlace que lleva a la primera página
    $('<li class="page_item c"><a href="#" class="first_link"><</a></li>').appendTo(paginador);

    //Enlace que lleva a la página previa
    $('<li class="page_item prev_link"> <a href="#" aria-label="Previous" class="prev_link"> <span aria-hidden="true">&laquo;</span> </a> </li>').appendTo(paginador);


    var pag = 0;
    while(totalPaginas > pag)
    {
        //Enlace que lleva a la página seleccionada 
        $('<li class="page_item a"><a href="#" class="page_link">'+(pag+1)+'</a></li>').appendTo(paginador);
        pag++;
    }   



    //Enlace que lleva a la página siguiente
    $('<li class="page_item next_link"> <a href="#" aria-label="Next" class="next_link"> <span aria-hidden="true">&raquo;</span> </a> </li>').appendTo(paginador);

    //Enlace que lleva a la última página
    $('<li class="page_item"><a href="#" class="last_link">></a></li>').appendTo(paginador);

    //Añade la clase "active" al primer elemento del paginador que tenga la clase ".page_link"
    paginador.find(".page_link:first").addClass("active");
    //Añade la clase "active" al primer elemento de la lista de enlaces del paginador
    paginador.find(".page_link:first").parents("li").addClass("active");

    //Esconde el enlace a página previa
    paginador.find(".prev_link").hide();

    //Carga la página al hacer click en el enlace
    paginador.find("li .page_link").click(function()
    {
        var irpagina =$(this).html().valueOf()-1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la primera página
    paginador.find("li .first_link").click(function()
    {
        var irpagina =0;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la página previa
    paginador.find("li .prev_link").click(function()
    {
        var irpagina =parseInt(paginador.data("pag")) -1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la siguiente página
    paginador.find("li .next_link").click(function()
    {
        var irpagina =parseInt(paginador.data("pag")) +1;
        cargaPagina(irpagina);
        return false;
    });

    //Carga la última página
    paginador.find("li .last_link").click(function()
    {
        var irpagina =totalPaginas -1;
        cargaPagina(irpagina);
        return false;
    });

    cargaPagina(0);


    $(".page_link").on("click", function(e)
    {       
        //decir que se envia por ajax (evita que se recargue la pagina)
        e.preventDefault();
        //Quita la clase "active" de todos los elementos
        $(".page_link").removeClass("active");
        //Pone la clase "active" en el elemento cliqueado
        $(this).addClass("active");

        current_paginator_item=$(".page_link").index(this)+1; 
    });

    $(".first_link").on("click", function(e)
    {
        e.preventDefault();
        //Quita la clase "active" de todos los elementos
        $(".page_link").removeClass("active");  
        $(".page_link:eq(0)").addClass("active");       
        current_paginator_item=1;
    });

    $(".last_link").on("click", function(e)
    {
        e.preventDefault();
        //Quita la clase "active" de todos los elementos
        $(".page_link").removeClass("active");  
        var n = $(".page_link").length;
        $(".page_link:eq(" + (n-1)  + ")").addClass("active");          
        current_paginator_item=n;
    });

    $(".next_link").on("click", function(e)
    {
        e.preventDefault();
        //Quita la clase "active" de todos los elementos
        $(".page_link").removeClass("active");              
        $(".page_link:eq(" + current_paginator_item  + ")").addClass("active");         
        current_paginator_item++;       
    });



    $(".prev_link").on("click", function(e)
    {
        e.preventDefault();
        //Quita la clase "active" de todos los elementos
        $(".page_link").removeClass("active");  
        current_paginator_item--;           
        $(".page_link:eq(" + (current_paginator_item-1)  + ")").addClass("active");     

    }); 

}



function cargaPagina(pagina) 
{

    ///calcular desde donde se leerá la base de datos
    var desde = pagina * itemsPorPagina;


    ///llamada al archivo PHP que lee la base de datos para leer los datos de la tabla productos
    $.ajax({
        data:{"param1":"datos","limit":itemsPorPagina,"offset":desde},
        type:"GET",
        ///dataType:'json',
        url:"pagination.php"
    }).done(function(data,textStatus,jqXHR)
    {
        var lista = data.lista;

        $("#productos").html("");    

        $.each(lista, function(ind, elem)
        {
            ///creaItemProducto(elem);               
        });

    }).fail(function(jqXHR,textStatus,textError)
    {
        alert("Error al realizar la peticion dame " + textError);

    });

    if(pagina >= 1)
    {
        //Muestra el enlace a página previa
        paginador.find(".prev_link").show();
    }
    else
    {
        //Oculta el enlace a página previa
        paginador.find(".prev_link").hide();
    }


    if(pagina < totalPaginas - 1)
    {
        //Muestra el enlace a página siguiente
        paginador.find(".next_link").show();
    }
    else
    {
        //Oculta el enlace a página siguiente
        paginador.find(".next_link").hide();;
    }

    //Obtiene el número de página sellecionada (current)
    paginador.data("pag",pagina);

    if(numerosPorPagina>1)
    {
        //oculta todos los enlces
        $(".page_link").hide();
        $(".a").hide();

        if(pagina < (totalPaginas - numerosPorPagina))
        {
            $(".page_link").slice(pagina,numerosPorPagina + pagina).show();
            $(".a").slice(pagina,numerosPorPagina + pagina).show();
        }
        else
        {           
            ///alert("2");
            if(totalPaginas > numerosPorPagina)
            {
                $(".page_link").slice(totalPaginas - numerosPorPagina).show();
                $(".a").slice(totalPaginas - numerosPorPagina).show();
            }

        }
    }


}


$(function()
{

    ///llamada al archivo PHP que lee la base de datos para saber "cuantos" registros tiene la tabla
    $.ajax({

        data:{"param1":"cuantos"},
        type:"GET",
        ///dataType:"json", 
        url:"pagination.php"

    }).done(function(data,textStatus,jqXHR)
    {               

            var total = data.total;
            creaPaginador(total);           

    }).fail(function(jqXHR,textStatus,textError)
    {
        alert("Error al realizar la peticion cuantos (" + textError + ") " + textStatus);
    });

});

Y el código CSS:

.page_item
{ 
  border: 1px solid #2499D8;   
  overflow: hidden;
}

.page_item  a 
{
  float: left;
  text-align: center;
  padding: 7px 8px;
  text-decoration: none;
  font-size: 17px;
}

.page_item a:hover 
{
  background-color: #ddd;
  color: black;
}

.page_item a.active 
{
  background-color: #2499D8;
  color: white;
}

Espero que a alguien le sea útil!! :-)

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.