模仿百度分页（Ajax异步加载）
发布时间：2020-12-16 01:53:59 所属栏目：百科 来源：网络整理
导读：做法： 1.先在界面填几块div，处理一下样式，不过因为只是Demo，所以也就没做太多处理了。 2.通过Ajax异步加载后台的分页后的数据。 3.前台接收到数据后，动态生成标签，并对标签进行渲染。 4.动态生成标签的时候需要注意点。 html代码： html body div clas
|
做法：
1.先在界面填几块div，处理一下样式，不过因为只是Demo，所以也就没做太多处理了。
2.通过Ajax异步加载后台的分页后的数据。
3.前台接收到数据后，动态生成标签，并对标签进行渲染。
4.动态生成标签的时候需要注意点。
html代码：
<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');
}
});
}
结果：
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |