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

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