时间:2021-07-01 10:21:17 帮助过:19人阅读
//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); } }); });
以上就是利用html5 Api实现分页的示例代码分享的详细内容,更多请关注Gxl网其它相关文章!