做法：
1.先在界面填几块div，处理一下样式，不过因为只是Demo，所以也就没做太多处理了。
<html> <body> <div class="bc_bg"> <div class="menu"> <div class="list_bg"> <table border="1"> </table> </div> <div class="bt_bg"> </div> </div> </div> </body> </html>
CSS代码：
.now-page{}
body{
margin-top:0px;
margin-bottom:0px;
background-color:#CCCCCC;
}
.menu{
padding-top:100px;
width:300px;
height:300px;
margin:auto auto auto auto;
}
.bc_bg{
height:900px;
width:90%;
margin:auto auto auto auto;
background-color:#FFFFFF;
}
/*显示列表样式设置*/
.list_bg{
padding-bottom:50px;
}
table{
width:200px;
height:300px;
}
/*分页按钮样式设置*/
.bt_bg{
width:290px;
height:60px;
/*background-color:blue;*/
}
/*button样式设置*/
.tagbg{
float:left;
height:60px;
width:50px;
position:relative;
/*background-color:red;*/
}
.ud{
float:left;
height:60px;
width:70px;
position:relative;
/*background-color:green;*/
}
.button{
height:30px;
border-style:solid;
border-width:1px;
color:blue;
position:absolute;
bottom:0px;
right:0px;
border-color:#DDDDDD;
background-color:white;
}
.buttonhover{
background-color:#BBFFEE;
border-color:blue;
}
.now-page{
width:50px;
}
.pnpage{
width:70px;
}
JS代码：
//定义一个全局变量，用于处理当用户点击上一页或者下一页的时候计算 var nowPage = 0; //总页数，用户可能会对数据进行操作，所以每次加载都要重新从数据库进行计算页数 var pgCount; $(document).ready(function(){ getPage(0);//刚开始显示第0页 $(".now-page").live("click",function() {//点击事件 if (nowPage != $(this).attr("key")){ getPage($(this).attr("key")); $("button").css("color","black"); } }); $(".prev-page").live("click",function() { //如果用户点击了上一页按钮，且当前按钮不为第0页，则跳到上一页 if(nowPage >= 1){ getPage(nowPage - 1); } }); $(".next-page").live("click",function() { //同上 if (nowPage <= (pgCount-1)){ getPage(nowPage + 1); } }); }); /** 渲染标签 */ function renderingCss(){//jQuery渲染标签 $(".tagbg").addClass("tagbg"); $(".ud").addClass("ud"); $("button").addClass("button"); $(".now-page").addClass("now-page"); $(".prev-page,.next-page").addClass("pnpage"); //鼠标悬停样式 $("button").mouSEOver(function(){ $(this).css({"background-color":"#BBFFEE","border-color":"blue"}); }); $("button").mouSEOut(function(){ $(this).css({"background-color":"white","border-color":"#DDDDDD"}); }); $(".index").css({"border-width":"0px","color":"black"}); } /** 生成标签 */ function createPage(data,pagenum){ nowPage = pagenum; var jsonResult = data.jsonResult; pgCount = Math.ceil(parseInt(data.count)/3);//ceil向上取整 $("table").empty(); $(".bt_bg").empty(); $("table").append("<tr><th>username</th><th>password</th></tr>"); for (var i = 0; i < jsonResult.length; i++){ $("table").append("<tr><td>"+jsonResult[i].username+"</td> "+"<td>"+jsonResult[i].password+"</td></tr>"); } //分页标签 if (nowPage > 0){ $(".bt_bg").append("<div class='ud'><button class='prev-page'><上一页</button></div>"); } for (var i = 0; i < pgCount; i++){ //$(".bt_bg").append("<div class='tagbg'>"); if (i != nowPage){ $(".bt_bg").append("<div class='tagbg'><button class='now-page' key='" + i + "'>" + (i + 1) + "</button></div>"); }else{ //如果是当前页，则设置当前页对应的按钮不可用 $(".bt_bg").append("<div class='tagbg'><button disabled='disabled' class='now-page index' key='" + i + "'>" + (i + 1) + "</button></div>"); } //$(".bt_bg").append("</div>"); } if (nowPage < pgCount-1){ $(".bt_bg").append("<div class='ud'><button class='next-page'>下一页></button></div>"); } } function getPage(pagenum){ $.ajax({ data:{ page: pagenum },type: "post",url: "getUser.action",dataType: "json",success: function (data){ //alert(data.jsonResult[0].username); //alert(jsonResult[0].username); //alert(typeof pgCount); //alert(parseInt(data.count));String转换成int //alert(typeof parseInt(data.count));判断数据类型 createPage(data,pagenum); renderingCss(); },error: function (XMLHttpRequest,textStatus,errorThrown) { alert('ERROR'); } }); }
结果：
