ajax 实现分页
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="../bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<style>
a:hover{
cursor: pointer;
}
</style>
</head>
<body>
<input type="text" id="wb" placeholder="请输入父级代号" /> <input id="an" type="button" value="搜索"/>
<table class="table table-striped">
<thead>
<tr>
<th>地区代号</th>
<th>地区名称</th>
<th>父级代号</th>
</tr>
</thead>
<tbody id="nr"></tbody>
</table>
<div style="width: 600px; margin: 0px auto;">
<ul class="pagination" id="xuan">
</ul>
</div>
</body>
<script type="text/javascript">
var page = 1;
var ts = 10;
var tj
$(document).ready(function(e){
jiazai();
liebiao();
});
function jiazai(){
$.ajax({
url:"chuli.php",
data:{page:page,ts:ts,tj:tj},
type:"POST",
dataType:"JSON",
success:function(data){
var str = "";
for(var k in data){
str = str + "<tr><td>"+data[k][0]+"</td><td>"+data[k][1]+"</td><td>"+data[k][2]+"</td></tr>"
}
$("#nr").html(str);
$("#prev").click(function(){
if(page>1){
page=page-1;
}
jiazai();
liebiao();
})
$("#next").click(function(){
if(page<zys()){
page=page+1;
}
jiazai();
liebiao();
})
$(".hy").click(function(){
var p = $(this).text();
page = parseInt(p);
jiazai();
liebiao();
})
$("#an").click(function(){
tj=$("#wb").val();
page=1;
jiazai();
liebiao();
})
}
});
}
function liebiao(){
str="";
//上一页
str=str+"<li><a id='prev'>«</a></li>";
//数字
for(i=page-4;i<page+5;i++){
if(i>0&&i<zys()){
if(i==page){
str=str+"<li class='active'><a>"+i+"</a></li>"
}else{
str=str+"<li><a class='hy'>"+i+"</a></li>"
}
}
}
//下一页
str=str+"<li><a id='next'>»</a></li>"
$("#xuan").html(str);
}
function zys(){
ys=0;
$.ajax({
async:false,
url:"zys.php",
data:{tj:tj},
type:"POST",
dataType:"TEXT",
success:function(data){
ys = Math.ceil(data/ts);
}
});
return ys;
}
</script>
</html>
