<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="js/ajax.js"></script>
<script src="js/config.js"></script>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div id="qw" style="height:200px; width:100%;background-color:#444">
<table id="table">
</table>
</div>
<div class="waiceng" style="background-color:#666;height:30px;width:100%">
<div class="shouye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">首页</div>
<div id="shang" class="shangye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">上一页</div>
<div id="1" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">1</div>
<div id="2" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;"> 2</div>
<div id="3" class="ye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">3</div>
<div id="4" class="ye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">4</div>
<div id="5" class="ye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">5</div>
<div id="xia" class="xiaye" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">下一页</div>
<div class="weiye" style="background-color:#888;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">尾页</div>
<div class="1" style="background-color:#999;margin-left:10px;width:7%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
<div style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">第</div>
<div style="background-color:#ppp;width:40%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
<input id="a" type="text" style="width:20px;height:24.5px; style="border:0px;">
</div>
<div style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">页</div>
</div>
<div class="tiaozhuan" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">跳转</div>
<div class="1" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
<div style="width:70%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">当前页:</div>
<div class="dangqianye" style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">1</div>
</div>
<div class="1" style="background-color:#999;margin-left:10px;width:5%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">
<div style="width:70%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;">总页数:</div>
<div class="zongyeshu" style="width:30%;height:30px;float:left;font-size:12px; line-height:30px;text-align:center;"></div>
</div>
</body>
<script>
$(function fenye(){
var divclass = $(".ye");
alert(divclass.length);
var totalnum = 31;
var pageSize = 2;
var zongyeshu = totalnum/pageSize;
if(totalnum%pageSize == 0){
$(".zongyeshu").text(parseInt(totalnum/pageSize));
}else{
$(".zongyeshu").text(parseInt(totalnum/pageSize)+1);
}
for(var i = 0; i<divclass.length;i++){
divclass[0].onclick = function(){
if($("#1").text()==1){
$(".dangqianye").text($("#1").text());
fen();
}else if($("#1").text()==2){
$("#2").text($("#1").text());
$("#1").text(parseInt($("#2").text())-1);
$("#3").text(parseInt($("#2").text())+1);
$("#4").text(parseInt($("#2").text())+2);
$("#5").text(parseInt($("#2").text())+3);
$(".dangqianye").text($("#2").text());
fen();
}else{
$("#3").text($(this).text());
$("#1").text(parseInt($("#3").text())-2);
$("#2").text(parseInt($("#3").text())-1);
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$(".dangqianye").text($("#3").text());//当前页
fen();
}
}
divclass[1].onclick = function(){
if($("#2").text()==2){
$(".dangqianye").text($("#2").text());//当前页
}else {
$("#3").text($(this).text());
$("#1").text(parseInt($("#3").text())-2);
$("#2").text(parseInt($("#3").text())-1);
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$(".dangqianye").text($("#3").text());//当前页
}
}
divclass[2].onclick = function(){
$("#3").text($(this).text());
$("#1").text(parseInt($("#3").text())-2);
$("#2").text(parseInt($("#3").text())-1);
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$(".dangqianye").text($("#3").text());//当前页
}
divclass[3].onclick = function(){
if($(this).text()==zongyeshu-1){
$("#1").text(totalnum/pageSize-4);
$("#2").text(totalnum/pageSize-3);
$("#3").text(totalnum/pageSize-2);
$("#4").text(totalnum/pageSize-1);
$("#5").text(totalnum/pageSize);
$(".dangqianye").text($(this).text());//当前页
}else{
$("#3").text($(this).text());
$("#1").text(parseInt($("#3").text())-2);
$("#2").text(parseInt($("#3").text())-1);
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$(".dangqianye").text($("#3").text());//当前页
}
}
divclass[4].onclick = function(){
if($(this).text()==zongyeshu||$(this).text()==zongyeshu-1){
$("#1").text(totalnum/pageSize-4);
$("#2").text(totalnum/pageSize-3);
$("#3").text(totalnum/pageSize-2);
$("#4").text(totalnum/pageSize-1);
$("#5").text(totalnum/pageSize);
$(".dangqianye").text($(this).text());//当前页
}else{
$("#3").text($(this).text());
$("#1").text(parseInt($("#3").text())-2);
$("#2").text(parseInt($("#3").text())-1);
$("#4").text(parseInt($("#3").text())+1);
$("#5").text(parseInt($("#3").text())+2);
$(".dangqianye").text($("#3").text());//当前页
}
}
}
$(".shangye").click(function(){
if($("#5").text()==5){
$("#3").text(parseInt($("#3").text()));
$("#1").text(parseInt($("#1").text()));
$("#2").text(parseInt($("#2").text()));
$("#4").text(parseInt($("#4").text()));
$("#5").text(parseInt($("#5").text()));
if($(".dangqianye").text()==1){
alert("到头了");
}else{
$(".dangqianye").text(parseInt($(".dangqianye").text())-1);//当前页
}
}else{
$("#3").text(parseInt($("#3").text())-1);
$("#1").text(parseInt($("#1").text())-1);
$("#2").text(parseInt($("#2").text())-1);
$("#4").text(parseInt($("#4").text())-1);
$("#5").text(parseInt($("#5").text())-1);
$(".dangqianye").text($("#3").text());//当前页
}
});
$(".xiaye").click(function(){
var bb = $(".dangqianye").text();
if(bb<3){
$("#3").text(parseInt($("#3").text()));
$("#1").text(parseInt($("#1").text()));
$("#2").text(parseInt($("#2").text()));
$("#4").text(parseInt($("#4").text()));
$("#5").text(parseInt($("#5").text()));
$(".dangqianye").text(parseInt($(".dangqianye").text())+1);//当前页
}else if(bb<$(".zongyeshu").text()-2){
$("#3").text(parseInt($("#3").text())+1);
$("#1").text(parseInt($("#1").text())+1);
$("#2").text(parseInt($("#2").text())+1);
$("#4").text(parseInt($("#4").text())+1);
$("#5").text(parseInt($("#5").text())+1 );
if($(".dangqianye").text()==$(".zongyeshu").text()){
alert("到头了");
}else{
$(".dangqianye").text($("#3").text());//当前页
}
}else{
$("#1").text($(".zongyeshu").text()-4);
$("#2").text($(".zongyeshu").text()-3);
$("#3").text($(".zongyeshu").text()-2);
$("#4").text($(".zongyeshu").text()-1);
$("#5").text($(".zongyeshu").text());
if($(".dangqianye").text()==$(".zongyeshu").text()){
alert("到头了");
}else{
$(".dangqianye").text(parseInt($(".dangqianye").text())+1);//当前页
}
}
});
$(".shouye").click(function(){
$("#1").text("1");
$("#2").text("2");
$("#3").text("3");
$("#4").text("4");
$("#5").text("5");
$(".dangqianye").text($("#1").text());//当前页
});
$(".tiaozhuan").click(function(){
if(parseInt($("#a").val())>$(".zongyeshu").text()){
alert("最多"+$(".zongyeshu").text()+"页");
}else if(parseInt($("#a").val())==($(".zongyeshu").text()-2)||parseInt($("#a").val())==($(".zongyeshu").text()-1)||parseInt($("#a").val())==$(".zongyeshu").text()){
$("#1").text($(".zongyeshu").text()-4);
$("#2").text($(".zongyeshu").text()-3);
$("#3").text($(".zongyeshu").text()-2);
$("#4").text($(".zongyeshu").text()-1);
$("#5").text($(".zongyeshu").text());
$(".dangqianye").text(parseInt($("#a").val()));
}else{
if(parseInt($("#a").val())>=0){
if(parseInt($("#a").val())==1||parseInt($("#a").val())==2){
$("#1").text("1");
$("#2").text("2");
$("#3").text("3");
$("#4").text("4");
$("#5").text("5");
$(".dangqianye").text(parseInt($("#a").val()));
}else{
$("#3").text(parseInt($("#a").val()));
$("#1").text(parseInt($("#a").val())-2);
$("#2").text(parseInt($("#a").val())-1);
$("#4").text(parseInt($("#a").val())+1);
$("#5").text(parseInt($("#a").val())+2);
$(".dangqianye").text(parseInt($("#a").val()));
}
}else{
alert("不符合跳转规则");
}
}
});
$(".weiye").click(function(){
$("#1").text($(".zongyeshu").text()-4);
$("#2").text($(".zongyeshu").text()-3);
$("#3").text($(".zongyeshu").text()-2);
$("#4").text($(".zongyeshu").text()-1);
$("#5").text($(".zongyeshu").text());
$(".dangqianye").text($(".zongyeshu").text());//当前页
});
})
function fen(){
//var url = baseurl + "fenye";
var url = "http://localhost:8080/Test/fenye"
var base = AJAX.ajaxpost(url,"");
alert(11);
alert(typeof(base));
if(JSON.parse(base).code =="200"){
alert(12);
alert(JSON.parse(base).data[1][1]);
//alert(base.data[1][1]);
for(var j = ($(".dangqianye").text()-1)*3; $(".dangqianye").text()<$(".dangqianye").text()*3; j++){
alert("===");
var trStr = '<tr><td>'+JSON.parse(base).data[j][0]+'</td><td>'+JSON.parse(base).data[0][1]+'</td><td>'+JSON.parse(base).data[j][2]+'</td><td>'+JSON.parse(base).data[0][3]+'</td></tr>';
$("#table").append(trStr);
}
}
}
</script>
</html>