限制分页(1 2 3 4 5 .. 30 31 32 33)

时间:2013-02-15 22:33:46

标签: php javascript ajax jquery

我有一个php,ajax和jquery系统。该系统将按页面5搜索数据库查询,并将结果分成几个页面。问题是结果越多,显示的页面就越多。在当前的代码中,分页是这样的:首先是1 2 3 4 5 6。我想保持如此:最后1 2 ... 5 6最后。即我想限制分页。如果我没有限制分页,当他们有更多的结果将是这样的:1234567891011 ...

代码:

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

1 个答案:

答案 0 :(得分:2)

尝试

$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>';
}

通过改变$threshold,您可以改变可用的页面链接数量。

但是,如果用户位于第四页,最好将结果显示为first ... 3 4 5 ... last。这样,他们可以轻松地在相邻页面之间移动。此外,您可以更少次地运行循环。 $current_page是您当前所在的页面。这需要以某种方式提供给分页代码。

$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>';
}
为了解决这个具体问题,

编辑

您的分页是一次,不会在ajax中重新加载。为了实现这种减少的分页,您需要

  1. 只加载一些链接元素,如上面任一选项中所示,并添加新的链接元素或
  2. 加载所有链接元素,但隐藏不必要的链接,直到需要它们为止。
  3. 对于后者:

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