html5分页怎么链接,利用html5 Api 实现分页

//htmlapi.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="首页上一页下一页尾页";

$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();

?>

<?php  foreach ($arr as $key => $value) {

?>

<?php  echo $value['title'] ?>

} ?>

$next=$page+1>$pagecount?$pagecount:$page+1;

$up=$page-1<1?1:$page-1;

?>

首页

">上一页

">下一页

/*for($i=1;$i

echo"$i";

}*/

?>

">尾页

$(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 += "

"+v.title+""

})

$(".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);

}

});

});