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

//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);
 }
 });
 });