您好,UncleToo欢迎您!  为了更好的浏览本站,请使用高版本浏览器
RSS  Tag     设为首页 | 加入收藏
 您所在的位置:首页 > PHP技术 > PHP应用

PHP 一个简单但效果非常棒AJAX分页实例

作者:UncleToo  来源:翻译  日期:2013-12-30 7:55:24
收藏  评论:( 0 )  阅读:1248

PHP 一个简单但效果非常棒AJAX分页实例

Ajax分页已经成为所有现代web应用程序设计的基本要求。本节PHP教程介绍的PHP+AJAX分页功能简单,而且效果却非常好,对于PHP或AJAX的初学者来说,这绝对是一个很好的实例。

本教程主要包含两个文件。一个从数据库获取数据,一个实现分页功能。当然前提是你已经下载了jQuery类库文件。

<<源码下载>>

1、CSS样式代码

/*css file*/
.pagin {
padding: 10px 0;
font:bold 11px/30px arial, serif;
}
.pagin * {
padding: 2px 6px;
color:#0A7EC5;
margin: 2px;
border-radius:3px;
}
.pagin a {
        border:solid 1px #8DC5E6;
        text-decoration:none;
        background:#F8FCFF;
        padding:6px 7px 5px;
}
.pagin span, a:hover, .pagin a:active,.pagin span.current {
        color:#FFFFFF;
        background:-moz-linear-gradient(top,#B4F6FF 1px,#63D0FE 1px,#58B0E7);
}
.pagin span,.current{
    padding:8px 7px 7px;
}
.content{
    padding:10px;
    font:bold 12px/30px gegoria,arial,serif;
    border:1px dashed #0686A1;
    border-radius:5px;
    background:-moz-linear-gradient(top,#E2EEF0 1px,#CDE5EA 1px,#E2EEF0);
    margin-bottom:10px;
    text-align:left;
    line-height:20px;
}
.outer_div{
    margin:auto;
    width:600px;
}
#loader{
    position: absolute;
    text-align: center;
    top: 75px;
    width: 100%;
    display:none;
}


2、创建index.php分页页面

<?php
$action = (isset($_REQUEST['action'])&& $_REQUEST['action'] !=NULL)?$_REQUEST['action']:'';
if($action == 'ajax'){
    /* Connect To Database*/
    $dbname = 'csc';
    $link = mysql_connect("localhost","root","") or die("Couldn't make connection.");
    $db = mysql_select_db($dbname, $link) or die("Couldn't select database");
    include 'pagination.php'; //include pagination file
    //pagination variables
    $page = (isset($_REQUEST['page']) && !empty($_REQUEST['page']))?$_REQUEST['page']:1;
    $per_page = 4; //how much records you want to show
    $adjacents  = 4; //gap between pages after number of adjacents
    $offset = ($page - 1) * $per_page;
    //Count the total number of row in your table*/
    $count_query   = mysql_query("Select COUNT(id) AS numrows FROM messages");
    $row     = mysql_fetch_array($count_query);
    $numrows = $row['numrows'];
    $total_pages = ceil($numrows/$per_page);
    $reload = 'index.php';
    //main query to fetch the data
    $query = mysql_query("Select * FROM messages orDER BY RAND() LIMIT $offset,$per_page");
    //loop through fetched data
while($result = mysql_fetch_array($query)){
    echo '<div class="content">'.$result['message'].'</div>';
}
echo paginate($reload, $page, $total_pages, $adjacents);
} else{
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple <i>Ajax Pagination</i> With PHP And MySql</title>
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<link media="screen" href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
    $(document).ready(function(){
        load(1);
    });
    function load(page){
        $("#loader").fadeIn('slow');
        $.ajax({
            url:'index.php?action=ajax&page='+page,
            success:function(data){
                $(".outer_div").html(data).fadeIn('slow');
                $("#loader").fadeOut('slow');
            }
        })
    }
</script>
</head>
<body>
<div id="loader"><img src="loader.gif"></div>
<div class="outer_div"></div>
</body>
</html>
<?php }?>


这个文件主要执行两个操作:从页面的get或post提交数据中获取action值,如果action是ajax,则从数据库中取数并在页面上分页展示,否则执行else部分。

3、创建pagination.php页面。

这个页面就是一个分页函数 paginate 。

<?php
function paginate($reload, $page, $tpages, $adjacents) {
    $prevlabel = "&lsaquo; Prev";
    $nextlabel = "Next &rsaquo;";
    $out = '<div class="pagin green">';
    // previous label
    if($page==1) {
        $out.= "<span>$prevlabel</span>";
    } else if($page==2) {
        $out.= "<a href='javascript:void(0);' onclick='load(1)'>$prevlabel</a>";
    }else {
        $out.= "<a href='javascript:void(0);' onclick='load(".($page-1).")'>$prevlabel</a>";
    }
    // first label
    if($page>($adjacents+1)) {
        $out.= "<a href='javascript:void(0);' onclick='load(1)'>1</a>";
    }
    // interval
    if($page>($adjacents+2)) {
        $out.= "...\n";
    }
    // pages
    $pmin = ($page>$adjacents) ? ($page-$adjacents) : 1;
    $pmax = ($page<($tpages-$adjacents)) ? ($page+$adjacents) : $tpages;
    for($i=$pmin; $i<=$pmax; $i++) {
        if($i==$page) {
            $out.= "<span class='current'>$i</span>";
        }else if($i==1) {
            $out.= "<a href='javascript:void(0);' onclick='load(1)'>$i</a>";
        }else {
            $out.= "<a href='javascript:void(0);' onclick='load(".$i.")'>$i</a>";
        }
    }
    // interval
    if($page<($tpages-$adjacents-1)) {
        $out.= "...\n";
    }
    // last
    if($page<($tpages-$adjacents)) {
        $out.= "<a href='javascript:void(0);' onclick='load($tpages)'>$tpages</a>";
    }
    // next
    if($page<$tpages) {
        $out.= "<a href='javascript:void(0);' onclick='load(".($page+1).")'>$nextlabel</a>";
    }else {
        $out.= "<span>$nextlabel</span>";
    }
    $out.= "</div>";
    return $out;
}
?>


这里各处的只是部分主要代码,完整的实例源码可以点击下面的连接下载。


<<源码下载>>


本文由UncleToo翻译整理,转载请注明出处!




PHP
 
AJAX
 
分页
 
除非特别声明,本站所有PHP教程及其他教程/文章均为原创、翻译或网友投稿,版权均归UncleToo中文网所有, 转载请注明作者及出处。
原文网址:http://www.uncletoo.com/html/application/764.html
读完这篇文章后,你是否有所收获? 分享是一种生活的信念!
  • 0
  • 0
我来说两句
更多>>网友评论