Using the HTML5 Api for paging

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 ' > Home </a><a class= ' pa ' href= '? p= $up ' > Prev </a><a class= ' pa ' Href= '? p= $next ' > Next </a><a class= ' pa ' href= '? p= $pagecount ' > Last </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" > Home </a>

<a class= ' pa ' href= "? p=<?php echo $up?>" > Prev </a>

<a class= ' pa ' href= "? p=<?php echo $next?>" > 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?>" > Last </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);

}

});

});

Using the HTML5 Api for paging