利用html5 Api实现分页的示例代码分享

//htmlapi.php
<?php
    //header("content-type:text/html;charset=utf-8");
    $dsn=&#39;mysql:host=127.0.0.1;dbname=edusoho&#39;;
    $db=new PDO($dsn,&#39;root&#39;,&#39;root&#39;);
    $page=isset($_GET[&#39;p&#39;])?$_GET[&#39;p&#39;]:&#39;1&#39;;
    $pagesize=&#39;10&#39;;
    $limit=($page-1)*$pagesize;
    $sql=&#39;select count(*) as num  from course_lesson_text&#39;;
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar[&#39;num&#39;];
    $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=&#39;pa&#39; href=&#39;?p=1&#39;>首页</a><a class=&#39;pa&#39; href=&#39;?p=$up&#39;>上一页</a>
    <a class=&#39;pa&#39; href=&#39;?p=$next&#39;>下一页</a><a class=&#39;pa&#39; href=&#39;?p=$pagecount&#39;>尾页</a>";
    $exit[&#39;arr&#39;]=$arr;
    $exit[&#39;page&#39;]=$pagea;
    exit(json_encode($exit));
 ?>
//index.php
<?php
    header("content-type:text/html;charset=utf-8");
    $dsn=&#39;mysql:host=127.0.0.1;dbname=edusoho&#39;;
    $db=new PDO($dsn,&#39;root&#39;,&#39;root&#39;);
    $page=isset($_GET[&#39;p&#39;])?$_GET[&#39;p&#39;]:&#39;1&#39;;
  //$page=1;
    $pagesize=&#39;10&#39;;
    $limit=($page-1)*$pagesize;
    $sql=&#39;select count(*) as num  from course_lesson_text&#39;;
    $rs=$db->query($sql);
    $ar=$rs->fetch();
    $count=$ar[&#39;num&#39;];
    $pagecount=ceil($count/$pagesize);
    $sql="select id,title from course_lesson_text limit $limit,$pagesize";
    $rs=$db->query($sql);
    $arr=$rs->fetchAll();
    ?>
    <meta charset=&#39;utf-8&#39;/>
    <ul class="list">
        <?php foreach ($arr as $key => $value) {
            ?>
            <li><?php echo $value[&#39;title&#39;] ?></li>
            <?php
        } ?>
    </ul>
    <?php 
        $next=$page+1>$pagecount?$pagecount:$page+1;
        $up=$page-1<1?1:$page-1;
    ?>
    <div id="pagea">
    <a class=&#39;pa&#39; href="?p=1">首页</a>
     <a class=&#39;pa&#39; href="?p=<?php echo $up ?>">上一页</a>
    <a class=&#39;pa&#39; href="?p=<?php echo $next ?>">下一页</a>
    <?php
        /*for($i=1;$i<$pagecount;$i++){
            echo"<a class=&#39;pa&#39; href=&#39;?p=$i&#39;>$i</a>";
        }*/
    ?>
    <a class=&#39;pa&#39; href="?p=<?php echo $pagecount ?>">尾页</a>
    </div>
    <script src=&#39;./jquery-1.8.0.js&#39; ></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: &#39;htmlapi.php&#39;+url,
                dataType:"json",
                success: function(data){
                    var html = "";
                    if(data[&#39;arr&#39;].length > 0) {
                        $.each(data[&#39;arr&#39;],function(k,v){
                            html += "<li>"+v.title+"</li>"
                        })
                        $(".list").html(html);  
                    }
                    var state = {
                        url: url,
                        title: document.title,
                        html: $(".list").html()
                    };
                    $("#pagea").html(data[&#39;page&#39;]);
                    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);
            }
    });
 });