利用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);            }    }); });