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> ";
//如果是第一页
if(curPage==1){
pageStr += "<span>首页</span> <span>上一页</span> ";
}else{
pageStr += "<span><button class=‘abc‘ data-num=‘1‘>首页</button></span> <span><button class=‘abc‘ data-num=‘"+(curPage-1)+"‘>上一页</button></span> ";
}
//如果是最后页
if(curPage>=totalPage){
pageStr += "<span>下一页</span> <span>尾页</span>";
}else{
pageStr += "<span><button class=‘abc‘ data-num=‘"+(parseInt(curPage)+1)+"‘>下一页</button></span> <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(){...}),这种写法是无效的。。所以要注意。
时间： 2024-10-24 00:30:07