如何给分页上一个和下一个按钮？

我想在分页使用1〜10页码显示，我想一个和下一个按钮有如何给分页上一个和下一个按钮？

这里是我的代码

<?php 
session_start(); 
?> 
<?php 
include('conn.php'); 

$per_page = 15; 
$select_table = "select * from clientreg"; 
$variable = mysql_query($select_table); 
$count = mysql_num_rows($variable); 
$pages = ceil($count/$per_page) 

?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Qjuery pagination with loading effect using PHP and MySql</title> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript"> 
    $(document).ready(function(){ 
    function Display_Load() 
    { 
     $("#load").fadeIn(1000,0); 
     $("#load").html("<img src='load.gif' />"); 
    } 
    function Hide_Load() 
    { 
     $("#load").fadeOut('slow'); 
    }; 
    $("#paginate li:first").css({'color' : '#FF0084'}).css({'border' : 'none'}); 
    Display_Load(); 
    $("#content").load("pagination.php?page=1", Hide_Load()); 
    <?php 
    $page 
    ?> 
    $("#paginate li").click(function(){ 
     Display_Load(); 
     $("#paginate li") 
     .css({'border' : 'solid #193d81 1px'}) 
     .css({'color' : '#0063DC'}); 
     $(this) 
     .css({'color' : '#FF0084'}) 
     .css({'border' : 'none'}); 
     var pageNum = this.id; 
     $("#content").load("pagination.php?page=" + pageNum, Hide_Load()); 

    }); 
}); 
    </script> 


<style type="text/css"> 


#load { 
width:30px; 
padding-top:50px; 
border:0px green dashed; 
margin:0 auto; 
} 
#paginate 
{ 
text-align:center; 
border:0px green solid; 
width:500px; 
margin:0 auto; 
} 
.link{ 
width:800px; 
margin:0 auto; 
border:0px green solid; 
} 

li{ 
list-style: none; 
float: left; 
margin-right: 16px; 
padding:5px; 
border:solid 1px #193d81; 
color:#0063DC; 
} 
li:hover 
{ 
color:#FF0084; 
cursor: pointer; 
} 
</style> 


</head> 

<body> 

<div id="content" ></div> 



<div class="link" align="center"> 



      <ul id="paginate"> 
       <?php 
       //Show page links 
       for($i=1; $i<=$pages; $i++) 
       { 
        echo '<li id="'.$i.'">'.$i.'</li>'; 
       } 
        echo '<br/>'; 

       ?> 
    </ul> 
    </div> 
    <div style="clear:both"> </div> 
<div id="load" align="center" ></div> 

</body> 
</html>

期望了把

像上一页 1， 2,3,4,5,6,7,8,9 10 Next

我怎样才能达到我的输出

在此先感谢

来源

2014-09-02 sheetal sharma

与以下内容替换代码：

<div class="link" align="center"> 
    <ul id="paginate"> 
     <li id="" class="page" data-value="prev">Prev</li> 
     <?php 
      for($i=1; $i<=$pages; $i++) { 
       echo '<li id="'.$i.'">'.$i.'</li>'; 
      } 
     ?> 
     <li id="" class="page" data-value="next">Next</li> 
    </ul> 
</div>

，并与下面的更新脚本：

<script type="text/javascript"> 
$(document).ready(function(){ 
function Display_Load() 
{ 
    $("#load").fadeIn(1000,0); 
    $("#load").html("<img src='load.gif' />"); 
} 
function Hide_Load() 
{ 
    $("#load").fadeOut('slow'); 
}; 
$("#paginate li:first").not('.page').css({'color' : '#FF0084'}).css({'border' : 'none'}); 
Display_Load(); 
$("#content").load("pagination.php?page=1", Hide_Load()); 
<?php 
$page 
?> 
$("#paginate li").not('.page').click(function() { 
    Display_Load(); 
    $("#paginate li").css({'border' : 'solid #193d81 1px'}).css({'color' : '#0063DC'}).removeClass("active"); 
    $(this).css({'color' : '#FF0084'}).css({'border' : 'none'}).addClass("active"); 
    var pageNum = this.id; 
    $("#content").load("pagination.php?page=" + pageNum, Hide_Load()); 

}); 

$("#paginate li.page").click(function() { 
    var page = $(this).attr("data-value"); 
    if(page == "prev") { 
     var index = $("#paginate li.active").index(); 
     if(index > 1) { 
      $("#paginate li.active").prev().trigger("click"); 
     } else { 
      $("#paginate li.active").trigger("click"); 
     } 
    } else { 
     var index = $("#paginate li.active").index(); 
     if(index < $("#paginate li").length -2) { 
      $("#paginate li.active").next().trigger("click"); 
     } else { 
      $("#paginate li.active").trigger("click"); 
     } 
    } 
}); 
}); 

</script>

我希望它会为你的作品。

来源

2014-09-02 05:47:09

它不工作亲爱的 – 2014-09-02 06:47:17

你会给我发送你的代码后，我面临的错误？所以我可以更好地尝试解决它，因为我已经尝试了一遍，它为我工作。 – 2014-09-02 06:53:51

这里没有错误显示，下一个按钮和上一个按钮不起作用 – 2014-09-02 07:06:54

Sheetal，我觉得你仍然不会做很多事情的分页像使用限制与SQL和页数等我建议你通过这个链接。

http://www.sanwebe.com/2013/03/ajax-pagination-with-jquery-php

，您可以查看演示here

http://www.9lessons.info/2010/10/pagination-with-jquery-php-ajax-and.html

和演示here

http://www.phpgang.com/how-to-create-pagination-in-php-and-mysql-with-ajax_315.html

来源

2014-09-02 05:23:34

我不想要页面刷新 – 2014-09-02 05:30:24

只是一个想法：

在你的PHP：

$current_page = isset($_POST['page']) ? $_POST['page'] : 1;

进一步：

<ul id="paginate"> 
      <li id="prev">Previous</id> 
      <?php 
      //Show page links 
      for($i=1; $i<=$pages; $i++) 
      { 
       echo '<li id="'.$i.'">'.$i.'</li>'; 
      } 
      ?> 
      <li id="next">Next</id> 
      <br /> 
</ul>

和单击处理程序：

$("#paginate li").click(function(){ 
    Display_Load(); 
    $("#paginate li") 
    .css({'border' : 'solid #193d81 1px'}) 
    .css({'color' : '#0063DC'}); 
    $(this) 
    .css({'color' : '#FF0084'}) 
    .css({'border' : 'none'}); 
    var pageNum = <?php echo $currentPage; ?>; 

    if (this.id == "prev") 
     pageNum = Math.max(1, pageNum--); 
    else if (this.id == "next") 
     pageNum = Math.min(<?php echo $pages ?>, pageNum++); 
    else 
     pageNum = this.id; 

    $("#content").load("pagination.php?page=" + pageNum, Hide_Load()); 

});

...没有测试，希望它帮助。

来源

2014-09-02 05:28:21

如何给分页上一个和下一个按钮？

回答

相关问题