标签：min ble list on() 加载 als rip ajax width
<script src="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" />
</head>
<body>
<table class="table table-hover">
<thead>
<tr>
<th>地区代号</th>
<th>地区名称</th>
<th>父级代号</th>
</tr>
</thead>
<tbody id="list">
</tbody>
</table>
<div style="margin:0px auto; width:500px">
<ul class="pagination" id="fenye">
</ul>
</div>
</body>
<script type="text/javascript">
var page = 1; //当前页
var ts = 10; //每页显示几条
$(document).ready(function(e) {
//加载数据
Load();
//加载分页列表
loadList();
});
//加载数据的方法
function Load(){
$.ajax({
url:"chuli.php",
data:{page:page,ts:ts},
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>";
}
$("#list").html(str);
}
});
}
//加载分页列表
function loadList(){
var str = "";
//上一页
str = str + "<li><a id=‘prev‘>«</a></li>";
//加载列表
for(var 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=‘item‘>"+i+"</a></li>";
}
}
}
//下一页
str = str + " <li><a id=‘next‘>»</a></li>";
$("#fenye").html(str);
//上一页点击
$("#prev").click(function(){
if(page>1){
page = page-1;
}
//重新加载数据
Load();
//重新加载分页列表
loadList();
})
//下一页点击
$("#next").click(function(){
if(page<zys()){
page = page +1;
}
//重新加载数据
Load();
//重新加载分页列表
loadList();
})
//分页列表点击
$(".item").click(function(){
var p = $(this).text();
page = parseInt(p);
//重新加载数据
Load();
//重新加载分页列表
loadList();
})
}
//总页数
function zys(){
var ys = 0;
$.ajax({
async:false,
url:"zys.php",
dataType:"TEXT",
success: function(data){
ys = Math.ceil(data/ts);
}
});
return ys;
}
</script>
标签：min ble list on() 加载 als rip ajax width
原文地址：http://www.cnblogs.com/ssx5310518/p/7566745.html
