限制分頁（1 2 3 4 5 .. 30 31 32 33）

Question

我在php，ajax和jquery中有一個系統。該系統將搜索每頁5的數據庫查詢並將結果分成幾頁。問題是，結果越多，顯示的頁面就越多。在當前的代碼中，分頁是這樣的：first 1 2 3 4 5 6 last。我想繼續如此：先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> 

Answer 1

嘗試

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

編輯爲您的分頁一次，而不是在阿賈克斯重新加載這個具體問題

的緣故。爲了實現這一減少的分頁，您可能需要

1. 負荷只有幾個鏈接元素在以上任一選擇，並添加新的鏈接元素或
2. 負載的所有鏈接元素卻隱藏着，直到不必要的鏈接他們是必需的。

對於後者：

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