利用html5Api实现分页
//htmlapi.php
成都创新互联是一家专业提供三原企业网站建设,专注与成都网站建设、成都做网站、H5场景定制、小程序制作等业务。10年已为三原众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
//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;
$exit['arr']=$arr;
$exit['page']=$pagea;
exit(json_encode($exit));
?>
//index.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();
?>
$value) {
?>
} ?>
$next=$page+1>$pagecount?$pagecount:$page+1;
$up=$page-1<1?1:$page-1;
?>
$(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 += "
})
$(".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);
}
});
});
标题名称:利用html5Api实现分页
文章网址:http://scjbc.cn/article/jhsjec.html