Limit Pagination (1 2 3 4 5 .. 30 31 32 33)

Question

I have a system in php, ajax and jquery. This system will search the database queries per page 5 and divide the results into several pages. The problem is that the more the results are more pages are displayed. In the current code, paging is like this: first 1 2 3 4 5 6 last. I would like to remain so: first 1 2 ... 5 6 last. Ie I want to limit the pagination. If I do not limit the pagination when they have more results would look like this: 1234567891011 ...

The code:

<script type="text/javascript">
$(document).ready(function(){

    function showLoader(){

        $('.search-background').fadeIn(200);
    }

    function hideLoader(){

        $('.search-background').fadeOut(200);
    };

    $(".pagcon li").click(function(){

        showLoader();

        $(".pagcon li").removeClass('current');
        $(this).addClass("current");

        $("#resultado").load("data.php?page=" + this.id, hideLoader)

        return false;
    });

    $("#1").addClass("current");
    showLoader();
    $("#resultado").load("data.php?page=1", hideLoader);

});
</script>

<style type="text/css">
#consultas {
    width:780px;
    min-height:245px;
    overflow:hidden;
}   
.search-background {
    background:#FFF;
    display:none;
    height:154px;
    position:absolute;
    padding-top:84px;
    text-align:center;
    opacity:0.5;
    filter:alpha(opacity=50);
    width:780px;
    z-index:999;
}   
</style>

<div id="consultas">
 <?php
 $per_page = 5;
 $sql = "select * from consultas ";
 $rsd = mysql_query($sql);
 $count = mysql_num_rows($rsd);
 $pages = ceil($count/$per_page);
 ?>
 <div class="search-background">
 <label><img title="Carregando..." src="loader.gif" alt="" /></label>
 </div>
 <div id="resultado">
 &nbsp;
 </div>

 </div>

 <ul class="pagination clearfix pagcon">
 <?php
 //Show page links
 echo '<li id="1"><a title="Página 1" href="#">Primeiro</a></li>';
 for($i=1; $i<=$pages; $i++)
 {
 echo '<li id="'.$i.'"><a href="#">'.$i.'</a></li>';
 }
 echo '<li id="'.$pages.'"><a title="Página '.$pages.'" href="#">Último</a></li>';
 ?>
 </ul>

data.php:

<?php
include_once("config.php"); //MYSQL CONFIG

$per_page = 5;
$sqlc = "show columns from consultas";
$rsdc = mysql_query($sqlc);
$cols = mysql_num_rows($rsdc);
$page = $_REQUEST['page'];

$start = ($page-1)*5;
$sql = "select * from consultas ORDER BY data DESC LIMIT $start,5";
$rsd = mysql_query($sql);
?>

<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
    <div class="message status success">

       <span><b><?php echo $rows['consulta']; ?> (<font color="#8D4B19"><?php echo $rows['codigo']; ?></font>)</b></span>
       <span><?php if(strlen($rows['user']) >= 30){ echo substr($rows['user'], 0, 30)."..."; } else { echo $rows['user']; } ?></span>
       <span><b><?php echo $rows['operacao']; ?></b></span>
       <span><?php echo date("d/m/Y", strtotime($rows['data'])); ?></span>
       <span>R$ <?php echo $rows['valor']; ?></span> 

    </div>
<?php
}?>

<script type="text/javascript">
$(document).ready(function(){

    var Timer  = '';
    var selecter = 0;
    var Main =0;

    bring(selecter);

});

function bring ( selecter )
{   
 $('div.status:eq(' + selecter + ')').stop().animate({ opacity: '1.0', height: '34px' },300,function(){
 if(selecter < 6)
 {
 $('div.status').stop().animate({ opacity: '1.0', height: '17px' },300);
 clearTimeout(Timer); 
 }
});

selecter++;
var Func = function(){ bring(selecter); };
Timer = setTimeout(Func, 20);
}
</script>

Answer 1

Try

$threshold=1;
for($i=1; $i<=$threshold+1; $i++)
{
    echo '<li id="'.$i.'"><a href="#">'.$i.'</a></li>';
}
echo "&nbsp;...&nbsp;";
for($i=$pages-$threshold; $i<=$pages; $i++)
{
    echo '<li id="'.$i.'"><a href="#">'.$i.'</a></li>';
}

By varying $threshold you can vary the number of page links available.

However, it would be better to present the results as first ... 3 4 5 ... last instead if the user is on the fourth page. This way they can easily move between adjacent pages. Also you can run through the loop fewer times. $current_page is the current page you are on. This needs to be made available to the pagination code somehow.

$threshold=1;
$lower_limit=(($current_page-$threshold)>1)?$current_page-$threshold:1;
$upper_limit=(($current_page+$threshold)<$pages)?$current_page-$threshold:$pages;
for($i=$lower_limit; $i<=$upper_limit; $i++)
{
    echo '<li id="'.$i.'"><a href="#">'.$i.'</a></li>';
}

Edit for the sake of this specific question

Your pagination is once and not reloaded in the ajax. In order to achieve this reduced pagination, you either need to

1. load only a few link elements as in either of the choices above and add new link elements or
2. load all the link elements but hide unnecessary links until they are required.

For the latter:

php

$threshold=1;
for($i=1; $i<=$threshold+1; $i++)
{
    echo '<li id="'.$i.'"><a href="#">'.$i.'</a></li>';
}
echo "&nbsp;...&nbsp;";
for($i; $i<=$pages; $i++)
{
    echo '<li id="'.$i.'"'.($i<($pages-$threshold)?'style="display:none"':'')'><a href="#">'.$i.'</a></li>';
}

javascript

$(".pagcon li").click(function(){

    showLoader();
    $(".pagcon li").hide();//hide all links
    $(".pagcon li").removeClass('current');
    $(this).addClass("current").show();
    var id=parse_int($(this).attr(id));
    $(".pagcon li:first, .pagcon li:first, .pagcon li#"+(id-1)+" .pagcon li#"+(id+1)).show();//show adjacent links and 'First' and 'Last'
    $("#resultado").load("data.php?page=" + this.id, hideLoader)

    return false;
});