[Ajax]简单的分页显示

效果

PHP 代码

<?PHP 
    header("content-type:text/html;charset=utf-8"); 

    //----------------------------------函数定义区----------------------------------------
    function showpages() {
        $page=$_POST["page"];
        //现在是一个从1-19的数字

        if($page)
        {
            $MysqLi=new MysqLi('localhost','root','PHPdata');
            if($MysqLi->connect_error)
            {
                die("连接失败");
            }
            $MysqLi->query("set names utf8");
            $result=$MysqLi->query("select * from articles");
            $total=$result->num_rows;
            $start=($page-1)*10;  

            if($total-$start>0  and  $total-$start<10)
            {
                $size=$total-$start;
            }
            else if($total-$start>=10)
            {
                $size=10;
            }
            else
            {
                $size=0;
            }

            if($size)
            {
                $result=$MysqLi->query("select * from articles limit $start,$size");
                if($result->num_rows)
                {
                    $json=array();
                    $index=0;
                     while($row=$result->fetch_row())
                    {
                        $json[$index][0]=$row[0];
                        $json[$index][1]=$row[1];
                        $index++;
                    }
                    $json=json_encode($json);
                    echo $json;
                }
            }
            $MysqLi->close();
        }
    }

    //---------------------------------代码执行区-----------------------------------
    showpages();
 ?>

HTML代码

<!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" xml:lang="en">
<head>
    <Meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <script src="jquery.js"></script>
    <script src="fenye.js"></script>
    <link rel="stylesheet" href="fenye.css" />
    <title>简单的分页练习</title>
</head>
<body>
      <div class="content">
      <table>
        <tr class="hang">
            <th>文章标题</th>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]Ajax初探</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[jQuery]表格内容的查看与删除</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[jQuery]练习-鼠标移动表格变色</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]PHPMailer类库的使用</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]MysqLi函数</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]字符串处理函数</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]数学函数</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]PHP预定义变量</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]图像处理-2</a></td>
        </tr>
        <tr class="hang">
            <td><a href="#">[PHP]PHP图像处理-1</a></td>
        </tr>
      </table>
      <span class="btn">1</span>
      <span class="btn">2</span>
      <span class="btn">3</span>
      <span class="btn">4</span>
      <span class="btn">5</span>
      <span class="btn">6</span>
      <span class="btn">7</span>
      <span class="btn">8</span>
      <span class="btn">9</span>
      <span class="btn">10</span>
      <span class="btn">11</span>
      <span class="btn">12</span>
      <span class="btn">13</span>
      <span class="btn">14</span>
      <span class="btn">15</span>
      <span class="btn">16</span>
      <span class="btn">17</span>
      <span class="btn">18</span>
      <span class="btn">19</span>
      </div>
</body>
</html>

jQuery代码

$(document).ready(function() {
   $(".btn").mouSEOver(function(){
      $(this).css("cursor","pointer");
   })
   $(".btn").click(function() {
       var pageindex=$(this).index();
       var sendData={"page":pageindex};
       $.ajax({
          type:"post",url:"fenye.PHP?"+Math.random(),data:sendData,dataType:"json",success:function(data) {
                     for(var i=data.length;i<10;i++)
                 {
                    $(".hang").find("a").eq(i).text("");
                    $(".hang").find("a").eq(i).attr("href","");
                 }
                     for(var i=0;i<data.length;i++)
                 {
                    $(".hang").find("a").eq(i).text(data[i][0]);
                    $(".hang").find("a").eq(i).attr("href",data[i][1]);
                 }
          }
       })
   })

})

CSS代码

*{ margin: 0px; padding: 0px; }
.content{ display: block; width:800px; height:auto; margin: 0px auto; }
table{ margin-top: 10px; }
.hang{ width:800px; height: 40px; text-align: left; font:18px 宋体; }
.hang>td,th{ width: 800px; height: 40px; padding-left: 12px; border-bottom: solid 1px gray; }
.btn{ height: 20px; width: 20px; float:left; display: block; border: solid 1px gray; text-align: center; }
.btn{ display: block; width:20px; height: 20px; float: left; margin-top: 10px; margin-left: 5px; }
a{ text-decoration: none; }

[Ajax]简单的分页显示

效果

PHP代码

HTML代码

jQuery代码

CSS代码

猜你在找的Ajax相关文章

PHP 代码