利用html5 Api 实现分页

//htmlapi.php

<?php

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

    $dsn='mysql:host=127.0.0.1;dbname=edusoho';

    $db=new PDO($dsn,'root','root');

    $page=isset($_GET['p'])?$_GET['p']:'1';

    $pagesize='10';

    $limit=($page-1)*$pagesize;

    $sql='select count(*) as num  from course_lesson_text';

    $rs=$db->query($sql);

    $ar=$rs->fetch();

    $count=$ar['num'];

    $pagecount=ceil($count/$pagesize);

    $sql="select id,title from course_lesson_text limit $limit,$pagesize";

    $rs=$db->query($sql);

    $arr=$rs->fetchAll();

    $next=$page+1>$pagecount?$pagecount:$page+1;

        $up=$page-1<1?1:$page-1;

    $pagea="<a class='pa' href='?p=1'>首页</a><a class='pa' href='?p=$up'>上一页</a><a class='pa' href='?p=$next'>下一页</a><a class='pa' href='?p=$pagecount'>尾页</a>";

    $exit['arr']=$arr;

    $exit['page']=$pagea;

    exit(json_encode($exit));

 ?>

//index.php

<?php

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

    $dsn='mysql:host=127.0.0.1;dbname=edusoho';

    $db=new PDO($dsn,'root','root');

    $page=isset($_GET['p'])?$_GET['p']:'1';

  //$page=1;

    $pagesize='10';

    $limit=($page-1)*$pagesize;

    $sql='select count(*) as num  from course_lesson_text';

    $rs=$db->query($sql);

    $ar=$rs->fetch();

    $count=$ar['num'];

    $pagecount=ceil($count/$pagesize);

    $sql="select id,title from course_lesson_text limit $limit,$pagesize";

    $rs=$db->query($sql);

    $arr=$rs->fetchAll();

    ?>

    <meta charset='utf-8'/>

    <ul class="list">

        <?php foreach ($arr as $key => $value) {

            ?>

            <li><?php echo $value['title'] ?></li>

            <?php

        } ?>

    </ul>

    <?php 

        $next=$page+1>$pagecount?$pagecount:$page+1;

        $up=$page-1<1?1:$page-1;

    ?>

    <div id="pagea">

    <a class='pa' href="?p=1">首页</a>

     <a class='pa' href="?p=<?php echo $up ?>">上一页</a>

    <a class='pa' href="?p=<?php echo $next ?>">下一页</a>

    <?php

        /*for($i=1;$i<$pagecount;$i++){

            echo"<a class='pa' href='?p=$i'>$i</a>";

        }*/

    ?>

    <a class='pa' href="?p=<?php echo $pagecount ?>">尾页</a>

    </div>

    <script src='./jquery-1.8.0.js' ></script>

    <script>

$(function(){

    var ajax,

        currentState;

$(".pa").live("click",function(e){

        e.preventDefault();

        var target = e.target,

           url = $(target).attr("href");

        !$(this).hasClass("current") && $(this).addClass("current").siblings().removeClass("current");

         if(ajax == undefined) {

            currentState = {

                url: document.location.href,

                title: document.title,

                html: $(".list").html()

            };

        }

        ajax = $.ajax({

                type:"get",

                url: 'htmlapi.php'+url,

                dataType:"json",

                success: function(data){

                    var html = "";

                    if(data['arr'].length > 0) {

                        $.each(data['arr'],function(k,v){

                            html += "<li>"+v.title+"</li>"

                        })

                        $(".list").html(html);  

                    }

                    var state = {

                        url: url,

                        title: document.title,

                        html: $(".list").html()

                    };

                    $("#pagea").html(data['page']);

                    history.pushState(state,null,url);

                }

        });

    });

   window.addEventListener("popstate",function(event){

        if(ajax == null){

                return;

            }else if(event && event.state){

                document.title = event.state.title;

                $(".list").html(event.state.html);

            }else{

                document.title = currentState.title;

                $(".list").html(currentState.html);

            }

    });

 });