Question

我想在分页中使用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 下一页

我如何实现输出

提前致谢

Answer 1

用以下内容替换您的代码：

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

我希望它能为你效劳。

Answer 2

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

Answer 3

只是一个想法：

在你的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());

});

...没有经过测试，希望有所帮助。

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

3 个答案: