Question

我目前正在使用PHP从mysql中分页我的数据。我想使用jquery load函数在单击分页上的链接时加载下一页。分页链接如下所示：

<div class="paginate">
    <a href="index.php?page=2">2</a>
    <a href="index.php?page=3">3</a>
    <a href="index.php?page=4">4</a>
</div>

我尝试了一些事情：

        //Pagination Click
$(".paginate a").click(function(){  

    //CSS Styles
    $(".paginate a")
    .css({'border' : 'solid #dddddd 1px'})
    .css({'color' : '#0063DC'});

    $(this)
    .css({'color' : '#FF0084'})
    .css({'border' : 'none'});

    //Loading Data
    var pageNum = this.id;

    $(".content").load("index.php?page=" + pageNum);
});

});

以下是完整代码：

<!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>Papermashup.com | PHP Pagination</title>

<link rel="stylesheet" type="text/css" href="../../../css/style.css"/>

<script src="../../../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../../js/jquery-ui-1.8.4.custom.min.js" type="text/javascript"></script>
<style>
.paginate {
font-family:Arial, Helvetica, sans-serif;
    padding: 3px;
    margin: 3px;
}

.paginate a {
    padding:2px 5px 2px 5px;
    margin:2px;
    border:1px solid #999;
    text-decoration:none;
    color: #666;
}
.paginate a:hover, .paginate a:active {
    border: 1px solid #999;
    color: #000;
}
.paginate span.current {
    margin: 2px;
    padding: 2px 5px 2px 5px;
        border: 1px solid #999;

        font-weight: bold;
        background-color: #999;
        color: #FFF;
    }
    .paginate span.disabled {
        padding:2px 5px 2px 5px;
        margin:2px;
        border:1px solid #eee;
        color:#DDD;
    }

    li{
        padding:4px;
        margin-bottom:3px;
        background-color:#FCC;
        list-style:none;}

    ul{margin:6px;
    padding:0px;}   

</style>
</head>

<body>

<?php include '../../../includes/db_connect.php';
         include '../time_format.php';

?>


<?php


    $tableName="user_microblog";        
    $targetpage = "index.php";  
    $limit = 5; 

    $query = "SELECT COUNT(*) as num FROM $tableName";
    $total_pages = mysql_fetch_array(mysql_query($query));
    $total_pages = $total_pages['num'];

    $stages = 3;
    $page = mysql_escape_string($_GET['page']);
    if($page){
        $start = ($page - 1) * $limit; 
    }else{
        $start = 0; 
        }   

    // Get page data
    $query1 = "SELECT * FROM $tableName LIMIT $start, $limit";
    $result = mysql_query($query1);

    // Initial page num setup
    if ($page == 0){$page = 1;}
    $prev = $page - 1;  
    $next = $page + 1;                          
    $lastpage = ceil($total_pages/$limit);      
    $LastPagem1 = $lastpage - 1;                    


    $paginate = '';
    if($lastpage > 1)
    {   




        $paginate .= "<div class='paginate'>";
        // Previous
        if ($page > 1){
            $paginate.= "<a href='$targetpage?page=$prev'>previous</a>";
        }else{
            $paginate.= "<span class='disabled'>previous</span>";   }



        // Pages    
        if ($lastpage < 7 + ($stages * 2))  // Not enough pages to breaking it up
        {   
            for ($counter = 1; $counter <= $lastpage; $counter++)
            {
                if ($counter == $page){
                    $paginate.= "<span class='current'>$counter</span>";
                }else{
                    $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
            }
        }
        elseif($lastpage > 5 + ($stages * 2))   // Enough pages to hide a few?
        {
            // Beginning only hide later pages
            if($page < 1 + ($stages * 2))       
            {
                for ($counter = 1; $counter < 4 + ($stages * 2); $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // Middle hide some front and some back
            elseif($lastpage - ($stages * 2) > $page && $page > ($stages * 2))
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $page - $stages; $counter <= $page + $stages; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
                $paginate.= "...";
                $paginate.= "<a href='$targetpage?page=$LastPagem1'>$LastPagem1</a>";
                $paginate.= "<a href='$targetpage?page=$lastpage'>$lastpage</a>";       
            }
            // End only hide early pages
            else
            {
                $paginate.= "<a href='$targetpage?page=1'>1</a>";
                $paginate.= "<a href='$targetpage?page=2'>2</a>";
                $paginate.= "...";
                for ($counter = $lastpage - (2 + ($stages * 2)); $counter <= $lastpage; $counter++)
                {
                    if ($counter == $page){
                        $paginate.= "<span class='current'>$counter</span>";
                    }else{
                        $paginate.= "<a href='$targetpage?page=$counter'>$counter</a>";}                    
                }
            }
        }

                // Next
        if ($page < $counter - 1){ 
            $paginate.= "<a href='$targetpage?page=$next'>next</a>";
        }else{
            $paginate.= "<span class='disabled'>next</span>";
            }

        $paginate.= "</div>";       


}

?>


<div id="microblogposts">

<?php 

        while($row = mysql_fetch_array($result))
        {

        echo '<div class="microblogpostwrapper">';
        echo '<div class="microblogpostimage">';
        echo '<img src="../../images/ecyu2wwn.gif" height="48" width="48">';
        echo '</div>';
        echo '<div class="microblogposttext">';
        echo '<p>';
        echo '<b class="pink"><a href="/profiles/'.$row['from_username'].'">'.$row['from_username'].'</a></b> ' ;
        echo ''.htmlentities (urldecode($row['content'])).'<br />' ;
        echo '<font style="color:#888;">'.newtime($row['posttime']).'</font>';
     echo'</p> </div>';

     echo'<div class="microblogpostactions">
     <input type="hidden" style="display:none" name="deleteid" class="deleteid" value="'.$row['id'].'" />
     <a href="Javascript:void[0]" class="deletepostbutton">Delete</a>
     </div>

     </div>';
        }

    ?>
 </div>   


<script type="text/javascript">

$(document).ready(function(){

            //Pagination Click
    $(".paginate a").click(function(){  

        //CSS Styles
        $(".paginate a")
        .css({'border' : 'solid #dddddd 1px'})
        .css({'color' : '#0063DC'});

        $(this)
        .css({'color' : '#FF0084'})
        .css({'border' : 'none'});

        //Loading Data
        var pageNum = this.id;

        $(".content").load("index.php?page=" + pageNum);
    });

    });

</script>

    <?php 
//   echo $total_pages.' Results';
 // pagination
 echo $paginate;

    ?>


<div class="content"></div>

</body>
</html>

Answer 1

如果我理解你的问题，即你想加载与链接相关的页面，请尝试修改jquery，这样

$(".paginate a").click(function(){  

//CSS Styles
$(".paginate a")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});

$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});



$(".content").load($(this).attr("href"));

}）;

Answer 2

请尝试使用jquery datatables来处理您的大部分分页。使用它，它运作良好，加上排序和过滤已经完成。

如何通过Jquery AJAX创建我的php分页分页

2 个答案: