标签：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);
}
});
});
标签：html5 api 分页
原文地址：http://11168949.blog.51cto.com/11158949/1742734
