bootstrap / pagination / php

Paginação artesanal foda em php

Tudo bem, então eu estava tentando implementar um sistema de paginação no meu aplicativo laravel, mas tudo me fez criar muitos arquivos e pensei que poderia ser mais simples. Então eu fiz isso.

Em primeiro lugar, quero que minha paginação seja assim:

  1. Pode mostrar cerca de 10 páginas na paginação, mas pode ser alterado.
  2. Possui setas anterior e seguinte.
  3. De alguma forma, destaca a página atual na paginação.
  4. O número de itens por página pode ser alterado.

Antes de mais nada fiz um pequeno snippet de php para testar o conceito. Ele usa << como a seta anterior e >> como a próxima seta, e destaca o número da página atual com estes traços duplos em torno de ex –3–

Então, digamos que o número total de itens seja 200 e a paginação mostre 4 páginas com 9 itens por página. Isso nos dá cerca de 22 páginas no total.

Se estivermos na página 1, deve ser assim:

--1--       2       3    4   >>

se estivermos na página 8

<<     --8--     9     10    11    >>

Se estivermos na página 22

<<   20   20   21   --22--

CÓDIGO:

$paginate = True;

//Retrieve those values from your database
$totalItems = 200; //I would retrieve the total items from the database
$page = 22;  //and I would retrieve this with a $_GET['page'] so they could 
//write something like http://yoursite/show/products?page=12


$itemsPerPage = 9; //set this up
$pagesInPagination = 4; //set this up too

//we calcute the last page by dividing and we round up
//to show all the items even though they are not gonna fill the whole page
$lastPage = ceil($totalItems/$itemsPerPage); 
$previousPage = ($page > 1)? ($page-1):1;
$nextPage = ($page!=$lastPage)? ($page+1):$page;

//the pagination is going to be a string with all the values
//I save it in a variable so we could use it several times in the page
//for example, at the top and at the bottom of each page
$pagination = "";

if($paginate==True and $lastPage>$pagesInPagination){
    $modOf = $page%$pagesInPagination;
    if((($page-$modOf)/$pagesInPagination)!=0){ 
        // we are in the middle of the list
        //therefore we need << to get to the previous set of pages
        $pagination .= "<<"; 
    }
    else { //we are in the first bunch of elements so we don't need <<
        $pagination.="";
    }
    for($i = ($page-$modOf); $i<=($page-$modOf+$pagesInPagination); $i++){
        if($i == $lastPage){
            //if we are in the last page we gotta stop
            //no matter that we cannot complete the pages in pagination value,
            //but we fill the pagination with pages from behind
            $pagination  = str_replace("<<", "", $pagination);
            $pagination = "<< ".($i-($pagesInPagination-$modOf))." ".$pagination;
            break;
        }
        else {
            if(($i == $page) && ($i!=0)){
                //mark the current page
                $pagination.=" --".$i."-- ";    
            }
            else if($i!=0){
                //just add the number
                $pagination.=" ".$i." ";    
            }
        }
    }
    if($page!=($lastPage-1)){
        //to go to the next page because we are not at the end yet
        $pagination.=">>";    
    }
    else {
        $pagination.="";
    }
}
else { 
    //since we cannot complete a whole pagination
    //we just show all the pages we can and highlight the current one
    for($i = 1; $i<= $lastPage; $i++ ){
        if($i==$page){
            $pagination.= " --".$i."-- ";
        }
        else{
            $pagination.=" ".$i." ";
        }
    }
}
echo($pagination);

AGORA que vemos que essa coisa funciona, vamos torná-la real. Vou usar os
estilos de paginação bootstrap porque eles são bonitos.

Como vemos, a única coisa que precisamos fazer é substituir o “-“. $ I. “-” por alguns divs, ul’s e li’s.
Lembre-se de que, para torná-lo bonito, você precisa ter o bootstrap 3 ou o que estiver disponível em 15 de junho de 2014.

//Those variables are for your project
//change them!
$yourUrl = "https://yourwebsite.com/products";

$paginate = True;

//Retrieve those values from your database
$totalItems = 200; //I would retrieve the total items from the database
$page = 22;  //and I would retrieve this with a $_GET['page so they could ']
//write something like http://yoursite/show/products?page=12


$itemsPerPage = 9; //set this up
$pagesInPagination = 4; //set this up too

//we calcute the last page by dividing and we round up
//to show all the items even though they are not gonna fill the whole page
$lastPage = ceil($totalItems/$itemsPerPage); 
$previousPage = ($page > 1)? ($page-1):1;
$nextPage = ($page!=$lastPage)? ($page+1):$page;

//the pagination is going to be a string with all the values
//I save it in a variable so we could use it several times in the page
//for example, at the top and at the bottom of each page
$paginationDiv = "";

if($paginate==True and $lastPage>$pagesInPagination){
    $modOf = $page%$pagesInPagination;
    if((($page-$modOf)/$pagesInPagination)!=0){ 
        // we are in the middle of the list
        //therefore we need << to get to the previous set of pages
        $paginationDiv.= "<div class='text-center'><ul class='pagination'><li><a class='' href='".$yourUrl."?page=".$previousPage."'>&laquo;</a></li>";
    }
    else { //we are in the first bunch of elements so we don't need <<
        $paginationDiv.="<div class='text-center'><ul class='pagination'>";
    }
    for($i = ($page-$modOf); $i<=($page-$modOf+$pagesInPagination); $i++){
        if($i == $lastPage){
                    /*
                      I'm just writing break instead of the replacing function of the code from above
                    because replacing in this more complicated string could lead to problems
                    since you would be modifying it and I can't really tell which pattern I could use, it            would be a mess so I'm just showing
                     available pages in this last pagination*/
            break;
        }
        else {
            if(($i == $page) && ($i!=0)){
                //mark the current page
                $paginationDiv.="<li class='active'><a class='' href='".$yourUrl."?page=".$i."'>".$i."</a></li>";
            }
            else if($i!=0){
                //just add the number
                $paginationDiv.="<li><a class='' href='".$yourUrl."?page=".$i."'>".$i."</a></li>";   
            }
        }
    }
    if($page!=($lastPage-1)){
        //to go to the next page because we are not at the end yet
        $paginationDiv.="<li><a class='' href='".$yourUrl."?page=".$nextPage."'>&raquo;</a></li></div><!-- end text-center for pagination--></ul><!-- end pagination-->";
    }
    else{
        $paginationDiv.="</div><!-- end text-center for pagination--></ul><!-- end pagination-->";
    }
}
else { 
    //since we cannot complete a whole pagination
    //we just show all the pages we can and highlight the current one
    for($i = 1; $i<= $lastPage; $i++ ){
        if($i==$page){
            $paginationDiv.="<li class='active'><a class='' href='".$yourUrl."?page=".$i."'>".$i."</a></li>";
        }
        else if($i!=0){
            //just add the number
            $paginationDiv.="<li><a class='' href='".$yourUrl."?page=".$i."'>".$i."</a></li>";   
        }
    }
}
echo($paginationDiv);

Aqui estão algumas imagens de como isso se parece

Cenário

Cenário

Cenário

Sinto muito, mas acho que quando estava usando o operador condicional (condição)? Value1: value2 coderwall pensei que era o fim de um arquivo php e por isso colocou em duas caixas, basta pegar o código de uma caixa e colocar o código do outro bem próximo a ele

Related Posts

Botão de inicialização de login social JavaScript do Google para OAuth

Problema responsivo com Telerik RadWidow e Internet Explorer 9

Ocultar navegação para carrossel de bootstrap