您的位置：首页 > Web前端 > JQuery

使用jQuery和Ajax请求实现分页效果

2012-03-09 15:49 856 查看
在要求分页的程序中，我们一般会知道如下几个数据的参数：

总记录数count

每一页要显示的记录数：size

当前页：num

总页数我们可以通过count和size得到，在JS中可以使用Math.ceil()

编写我们的JS分页脚本page.js
//定义一个Page函数，接收两个参数，总记录数和参数列表var Page = function(count,params){
this.size=10;//初始化每一页显示10条数据
this.num=1;//当前页为第一页
this.count=count;
this.url;//定义一个url
this.cacheKey=Math.random();//定义一个随机数，保证在ajax传输的时候唯一地址，防止缓存提交
this.sumNum = function(){//得到总页数
return Math.ceil(this.count/this.size);
};
this.params = {};//定义一个参数列表
this.first=function(){//首页
this.show(1);
}
this.last=function(){//最后一页
this.show(this.sumNum());
}
this.next=function() {//下一页
this.show(this.num + 1);
}
this.prev=function() {//上一页
this.show(this.num - 1);
}
this.show=function(num) {//处理页面函数
if(num>0&&num<=this.sumNum()){
this.num = num;
//构造页面地址参数
var args = {'pager.offset':(this.num-1)*this.size,'page.size':this.size,'_temp':this.cacheKey};
for(p in this.params){
args[p] = this.params[p];
}
$.get(this.url,args,function(data){
showJson(data);//将异步请求的json数据显示出来
});
delete args;
}
}
this.reload=function(){//重新加载
this.clearCahce();//清除缓存
if(num>0&&num<=this.sumNum()){
this.show(this.num);
}else{
this.show(1);
}
}
this.clearCahce=function(){
this.cacheKey=Math.random();//改变key的值
}
this.bindForm=function(id){//绑定到表单中中
$(function(){
$('#'+id+' input[type=text]').each(function(i,input){
if($(input).val()!=''){
page.params[$(input).attr('name')] = $(input).val();
}
});
$('#'+id+' input:checked').each(function(i,input){
if($(input).val()!=''){
page.params[$(input).attr('name')] = $(input).val();
}
});
$('#'+id+' select').each(function(i,s){
if($(s).find('option:selected').val()!=''){
page.params[$(s).attr('name')] = $(s).find('option:selected').val();
}
});
$('#'+id).bind('submit',function(f){
for(var i=0;i<form.length;i++){
if(form[i].value==''){
$(form[i]).removeAttr('name');
}
}
});
});
}
}
要在前台页面做显示，我们一般是有我们定义的分页样式，例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
</head>

<body>
<table>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<c:forEach items="${users}" var="users">
<tr>
<td>${users.userId}</td>
<td>${users.userName}</td>
<td>${users.userAge}</td>
<td>${users.userSex}</td>
</tr>
</c:forEach>
<table>
<div class="flickr">
当前页：<span id="currentPage">0</span>/<span id="sumPage">0</span> 页
<a href="javascript:void(0);" onclick="page.first();">首页</a>
<a href="javascript:void(0);" onclick="page.prev();">上页</a>
<a href="javascript:void(0);" onclick="page.next();">下页</a>
<a href="javascript:void(0);" onclick="page.last();">末页</a>
总共<span id="count" style="color: red;"></span>条
</div>
</body>
</html>

调用page.js和编写我们的脚本语句
<script type="text/javascript" src="page.js"></script>

<script type="text/javascript">
var basePath = "<%=preBasePath%>";
var page = new Page();

//初始化菜谱Page
function initPage(count){
page.count = count;
page.url = basePath+"orderAction!ajaxDish.do?resId="+resId+"&preId="+preId;
$('#currentPage').html(page.num);
$('#sumPage').html(page.sumNum());
$('#count').html(page.count);
}

$(function(){
initPage(${orderPageModel.count});
});
</script>
我们在OrderAction中编写我们的ajaxDish方法

/**
* Ajax 获取菜谱
*/
public String ajaxDish() throws Exception{
PrintWriter writer = response.getWriter();
try{
int resId = Integer.parseInt(request.getParameter("resId"));
int preId = Integer.parseInt(request.getParameter("preId"));
PageModel pageModel = null;
if(preId==0){ //查询全部
pageModel = restaurantDishDao.findPageModelDishes(resId);
}else{
pageModel = restaurantDishDao.findPageModelDishesOfPreferentialId(resId, preId);
}
JSONObject object = new JSONObject();
object.accumulate("resId", resId);
object.accumulate("preId", preId);
object.accumulate("count", pageModel.getCount());
object.accumulate("data", pageModel.getDatas());
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
writer.print(object.toString());
}catch(Exception e){
throw e;
}finally{
writer.flush();
writer.close();
}
return null;
}





                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航