码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-03-16 18:46:23      阅读:230      评论:0      收藏:0      [点我收藏+]

标签:tle   content   htm   als   set   play   async   time()   styles   

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

  

 

 

代码下载

 

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

标签:tle   content   htm   als   set   play   async   time()   styles   

原文地址:http://www.cnblogs.com/nowphp/p/6560792.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!