用Ajax实现加载列表的

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.css" />
<script type="text/javascript" src="js/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="js/bootstrap.js" ></script>
<style>

</style>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h4>分页查询</h4>
</div>
<div class="panel-body">
<table class="table table-bordered text-center table-hover">

</table>
</div>
<div class="panel-footer">
<ul class="pagination">



</ul>
</div>
</div>
</div>

<script>

/*$.ajax({
type:"get",
url:"data/分页查询.json",
async:true,
success:function(res){
//console.log(res)
var sum=Math.ceil(res.length/5)
//console.log(sum)
var str=''
for (var i=0;i<sum;i++) {
str+='<li><a>'+(i+1)+'</a></li>'
}
$(".pagination").append(str)
}

});*/

var size = 5
var start = 0
var count = 0

$.ajax({
type:"get",
url:"data/分页查询.json",
async:true,
success:function(res){
//console.log(res)
var sum=Math.ceil(res.length/5)
//console.log(sum)
var str=''

var prev="<li><a>«</a></li>"
var next="<li><a>»</a></li>"

var str1='<tr><td>姓名</td><td>年龄</td><td>成绩</td></tr>'
var str2=''

for ( var i=start;i<(start+size);i++) {
str2+='<tr><td>'+res[i].name+'</td><td>'+res[i].core+'</td><td>'+res[i].age+'</td></tr>'
}

$("table").html(str2)
$("table").find("tr").eq(0).before(str1)

for (var i=0;i<sum;i++) {
str+='<li><a>'+(i+1)+'</a></li>'
}

$(".pagination").append(str)
$(".pagination li:first").before(prev)

$(".pagination li:last").after(next)
$(".pagination").find("li").eq(1).addClass("active")

}
});

//点击.
$(document).on("click",".pagination li:not(:first):not(:last)",function(){
//alert(123)
$(this).addClass("active").siblings().removeClass("active")
if ( size>0) {
size=5
}
count=$(this).index()-1
start=count*size
//alert(count)

$.ajax({
type:"get",
url:"data/分页查询.json",
async:true,
success:function(res){
var str=""
var sum=res.length
var str1='<tr><td>姓名</td><td>年龄</td><td>成绩</td></tr>'
if(size+start>sum){
size=sum-start
}else{
size=5
}
for( var i=start;i<(size +start);i++){
str += '<tr><td>'+res[i].name+'</td><td>'+res[i].core+'</td><td>'+res[i].age+'</td></tr>'
}
$("table").html(str)
$("table").find("tr").eq(0).before(str1)
}
});

})

//下一页
$(document).on("click",".pagination li:last",function(){
//alert(123)
count++
start=count*size
if(count>$(".pagination li:not(:first):not(:last)").length-1 ){
count=0
start=count*size

}
if(size>0 ){
size=5
start=count*size
}
$(".pagination li:not(:first):not(:last)").eq(count).addClass("active").siblings().removeClass("active")
//alert(123)
//console.log($(".pagination li:not(:first):not(:last)").eq(count).addClass("active").siblings().removeClass("active"))
$.ajax({
type:"get",
url:"data/分页查询.json",
async:true,
success:function(res){
var str = ""
var sum =res.length
var str4 ='<tr><td>姓名</td><td>成绩</td><td>年龄</td></tr>'
if(size+start>sum){
size=sum-start
}else{
size=5
}
for(var i=start;i<(size+start);i++){
str += '<tr><td>'+res[i].name+'</td><td>'+res[i].core+'</td><td>'+res[i].age+'</td></tr>'

}
$("table").html(str)
$("table").find("tr").eq(0).before(str4)
}
});

})

//上一页
$(document).on("click",".pagination li:first",function(){
//alert(123)
count--
start=count*size
if(count<0 ){
count=$(".pagination li:not(:first):not(:last)").length-1
start=count*size

}
if(size>0 ){
size=5
start=count*size
}
$(".pagination li:not(:first):not(:last)").eq(count).addClass("active").siblings().removeClass("active")
//alert(123)
//console.log($(".pagination li:not(:first):not(:last)").eq(count).addClass("active").siblings().removeClass("active"))
$.ajax({
type:"get",
url:"data/分页查询.json",
async:true,
success:function(res){
var str = ""
var sum =res.length
var str4 ='<tr><td>姓名</td><td>成绩</td><td>年龄</td></tr>'
if(size+start>sum){
size=sum-start
}else{
size=5
}
for(var i=start;i<(size+start);i++){
str += '<tr><td>'+res[i].name+'</td><td>'+res[i].core+'</td><td>'+res[i].age+'</td></tr>'

}
$("table").html(str)
$("table").find("tr").eq(0).before(str4)
}
});

})

</script>
</body>

</html>

json

[
{"name":"彪彪1","core":"60","age":"20"},
{"name":"彪彪2","core":"60","age":"20"},
{"name":"彪彪3","core":"60","age":"20"},
{"name":"彪彪4","core":"60","age":"20"},
{"name":"彪彪5","core":"60","age":"20"},
{"name":"彪彪6","core":"60","age":"20"},
{"name":"彪彪7","core":"60","age":"20"},
{"name":"彪彪8","core":"60","age":"20"},
{"name":"彪彪9","core":"60","age":"20"},
{"name":"彪彪10","core":"60","age":"20"},
{"name":"彪彪11","core":"60","age":"20"},
{"name":"彪彪12","core":"60","age":"20"},
{"name":"彪彪13","core":"60","age":"20"},
{"name":"彪彪14","core":"60","age":"20"},
{"name":"彪彪15","core":"60","age":"20"},
{"name":"彪彪16","core":"60","age":"20"},
{"name":"彪彪17","core":"60","age":"20"},
{"name":"彪彪18","core":"60","age":"20"},
{"name":"彪彪19","core":"60","age":"20"},
{"name":"彪彪20","core":"60","age":"20"},
{"name":"彪彪21","core":"60","age":"20"},
{"name":"彪彪22","core":"60","age":"20"},
{"name":"彪彪23","core":"60","age":"20"},
{"name":"彪彪24","core":"60","age":"20"},
{"name":"彪彪25","core":"60","age":"20"},
{"name":"彪彪26","core":"60","age":"20"}

]

用Ajax实现加载列表的

猜你喜欢