jquery+jquery.pagination+php+ajax 无刷新分页

时间:2023-03-08 17:13:02
jquery+jquery.pagination+php+ajax 无刷新分页
<!DOCTYPE html>
<html ><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预约列表</title>
<link rel="stylesheet" href="./static/pagination.css">
<script type="text/javascript" src="./static/jquery.min.js"></script>
<script type="text/javascript" src="./static/jquery.pagination.js"></script>
<script type="text/javascript">
$(function(){
var num_entries = 10;//先写10,ajax请求后后更新为 16 测试ajax更新页码用
var initPagination = function() {
// 创建分页
$("#Pagination").pagination(num_entries, {
num_edge_entries: 1, //边缘页数
num_display_entries: 4, //主体页数
callback: pageselectCallback,
items_per_page: 1, //每页显示1项
prev_text: "前一页",
next_text: "后一页"
});
}; function pageselectCallback(page_index, jq){
page_index++;
var html='';
$.ajax({
url: "data.php",
type: 'post',
dataType: 'json',
async : false,
data:{page:page_index},
success: function (data, status) {
count = data.list.length;
html += "<table><th>title</th><th>content</th>";
if(count>0){
for(i=0;i<count;i++){
html += "<tr><td>"+data['list'][i].title+"</td><td>"+data['list'][i].content+"</td></tr>";
}
}
html += "</table>";
}
});
$("#Searchresult").html(html);
return false;
}
initPagination();
});
</script>
</head> <body>
<h1>预约列表</h1>
<div id="Pagination" class="pagination"></div>
<div id="Searchresult">
</div>
</body></html>

php

<?php

$data = array(
'1'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12),
'2'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content'),array("title"=>'111title',"content"=>'1111content')),'page' => 12),
'3'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'4'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'5'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'6'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'7'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'8'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'9'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'10'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'11'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
'12'=>array('list'=>array(array("title"=>'111title',"content"=>'1111content')),'page' => 16),
);
echo json_encode($data[$_POST['page']]);
//echo time();
?>

  

代码下载