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

代码下载