ajax-page局部刷新分页实例

1.引用文件：connect.php

<?php
$host="localhost";
$db_user="root";
$db_pass="root";
$db_name="wh";
$timezone="Asia/Shanghai";

$link=mysql_connect($host,$db_user,$db_pass);
mysql_select_db($db_name,$link);
mysql_query("SET names UTF8");

header("Content-Type: text/html; charset=utf-8");
date_default_timezone_set($timezone); //北京时间
?>

2.ajax,对数据的逻辑处理：pages.php

<?php
include_once('connect.php');

$page = intval($_POST['pageNum']);

$page = $page-1;
// var_dump($page);
// exit;

$result = mysql_query("select id from aa");
$total = mysql_num_rows($result);//总记录数

$pageSize = 6; //每页显示数
$totalPage = ceil($total/$pageSize); //总页数

$startPage = $page*$pageSize;

$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;

$start = $page * $pageSize + 1;
$end = ($page + 1) * $pageSize; 

// $query = mysql_query("select id,uniprot,url from aa order by id asc limit $startPage,$pageSize");
$query = mysql_query("select id,uniprot,url from aa where id between $start and $end");


while($row=mysql_fetch_array($query)){
     $arr['list'][] = array(
         'id' => $row['id'],
        'uniprot' => $row['uniprot'],
        'url' => $row['url'],
     );
}
//print_r($arr);
echo json_encode($arr);
?>

3.主页：index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax-page</title>

    <script type="text/javascript" src="./js/1.11.js" ></script>
    <style type="text/css">
     *{
         margin:0px;
         padding:0px;
     }

     #bigContent{
         /*border:1px solid #282828;*/
         width:800px;
         height:600px;
         margin:0 auto;
     }

     #header{
         width:100%;
         height:30px;
         text-align:center;
         color:red;
         font-style:italic;
     }
     #contenter{
         width:95%;
         height:450px;
         /*border:1px solid #abcdef;*/
         margin:20px auto;
     }

     .left_0{
         width:30%;
         height:200px;
         float:left;
         border:1px solid red;

     }
     .left_1{
         width:30%;
         height:200px;
         float:left;
         border:1px solid red;
         margin-left:5%;

     }

     .left_2{
         width:30%;
         height:200px;
         float:right;
         border:1px solid red;

     }

     .left_3{
         width:30%;
         height:200px;
         float:left;
         border:1px solid red;
         margin-top:30px;

     }
     .left_4{
         width:30%;
         height:200px;
         float:left;
         border:1px solid red;
         margin-left:5%;
         margin-top:30px;

     }

     .left_5{
         width:30%;
         height:200px;
         float:right;
         border:1px solid red;
         margin-top:30px;

     }

     #pager{
         width:95%;
         height:50px;
         border:1px solid red;
         margin:20px auto;
         text-align:center;
         line-height:50px;
     }

     button:hover{
         cursor:pointer;
         color:red;
     }

    </style>
</head>
<body>
    <div id="bigContent">
        <div id="header">
            <h1>ajax-page</h1>
        </div>
        <div id="contenter">

             

            <!-- <div class="left_0">
                1
            </div>
              
            <div class="left_1">
                2
            </div>

            <div class="left_2">
                3
            </div>


            <div class="left_3">
                4
            </div>
              
            <div class="left_4">
                5
            </div>

            <div class="left_5">
                6
            </div>
 -->
           

        </div>

        <div id="pager"> 
            <!-- <div class="wuheng" style="width:100%;height:100%;"></div> -->
        </div>

    </div>
</body>

<script type="text/javascript">
     // page 为默认值，默认为第一页
     var page = 1; 
     var total,pageSize,totalPage;

     function getData(page){

     $.ajax({
         type: 'POST',
         url: 'pages.php',
         data: 'pageNum='+page,
         dataType:'json',
         beforeSend:function(){
            // $("#header").append("<p id='loading'>loading...</p>");
        },
         success:function(json){

             $("#contenter").empty();  //清除包裹的元素，不包括自己
             // $("#contenter").remove();  //清除包裹的元素，包括自己
             //  注意 empty(),与remove() ,二者之间的区别
             // alert(msg.total);
             total = json.total; //总记录数
            pageSize = json.pageSize; //每页显示条数
            curPage = page; //当前页
            totalPage = json.totalPage; //总页数
            
            var contents = "";
            var list = json.list;

            // alert(list);
            $.each(list,function(index,array){ //遍历json数据列
                // alert(index  + "  " + array);
                // exit;
                contents += "<div class= 'left_"+index+"' >" + array['id'] + "<br/>" + array['uniprot'] + "<br/>" + array['url'] + "</div>";
                // alert(contents);
                // alert(array['url']);
                // exit;

            });
             
             $("#contenter").append(contents);


            // alert(page);
         },
         complete:function(){ //生成分页条
            getPageBar();
        },

        error:function(){
            alert("数据加载失败");
        }

     });

 }


     //获取分页条
function getPageBar(){
    //页码大于最大页数
    if(curPage>totalPage) 
        curPage=totalPage;
    //页码小于1
    if(curPage<1) 
        curPage=1;

    pageStr = "<span>共"+total+"条</span><span>"+curPage+"/"+totalPage+"</span>  &nbsp;&nbsp;&nbsp;&nbsp;";
    
    //如果是第一页
    if(curPage==1){
        pageStr += "<span>首页</span>&nbsp;&nbsp;&nbsp;<span>上一页</span>&nbsp;&nbsp;&nbsp;";
    }else{
        pageStr += "<span><button class='abc'   data-num='1'>首页</button></span>&nbsp;&nbsp;&nbsp;<span><button class='abc'  
 data-num='"+(curPage-1)+"'>上一页</button></span>&nbsp;&nbsp;&nbsp;";
    }
    
    //如果是最后页
    if(curPage>=totalPage){
        pageStr += "<span>下一页</span>&nbsp;&nbsp;&nbsp;<span>尾页</span>";
    }else{
        pageStr += "<span><button class='abc'   data-num='"+(parseInt(curPage)+1)+"'>下一页</button></span>&nbsp;&nbsp;&nbsp;
<span><button class='abc'   data-num='"+totalPage+"'>尾页</button></span>";
    }
        
    $("#pager").html(pageStr);
}



    $(function(){
        getData(1);

       // alert("aaaa");
       $("#pager").on("click","button",function(data){
           // alert(data);

           num = $(this).attr('data-num');
           // alert(num);
           if(num > 0){
               getData(num);
           }

       });
        

       
    });
</script>
</html>

3.几点注意：

JQuery获取append后的动态元素：live()和on()

在具体的代码中，若是通过:

 $("div").html("content");或者$("div").append(conternt)

,若要给动态添加的元素/标签/内容，，添加相关的事件，最好使用live,on等处理事件，否则无法生效。

如： $("#pager").on("click","button",function(data)。。如果是 $("#pager button").click(function(){...}),这种写法是无效的。。所以要注意。

posted @ 2016-01-22 10:27 侠岚之弋痕夕阅读(1909) 评论(0) 编辑收藏举报

刷新页面返回顶部

侠岚之弋痕夕

ajax-page局部刷新分页实例

公告