阿Q吧 > 利用AjAX+JSP+JSON+MYSQL实现无刷新分页,求实现过程

利用AjAX+JSP+JSON+MYSQL实现无刷新分页,求实现过程

2025-01-07 09:19:40

推荐回答（1个）

回答1：

代码如下:

一.html代码部分:

 
  
   
   序号 
   标题 
   地点 
   已报名 
   类别 
   操作 
   
 
 

 
 
首页 
上一页 
下一页 
尾页

二.ajax代码部分:

var pageSize = "10";//每页行数 
var currentPage = "1";//当前页 
var totalPage = "0";//总页数 
var rowCount = "0";//总条数 
var params="";//参数 
var url="activity_list.action";//action 
$(document).ready(function(){//jquery代码随着document加载完毕而加载 
 //分页查询 
 function queryForPages()
 { 
  $.ajax({ 
   url:url, 
   type:'post', 
   dataType:'json', 
   data:"qo.currentPage="+currentPage+"&qo.pageSize="+pageSize+params, 
   success:function callbackFun(data)
   { 
    //解析json 
    var info = eval("("+data+")"); 
    //清空数据 
    clearDate(); 
    fillTable(info); 
   } 
  }); 
 } 
 //填充数据 
 function fillTable(info)
 { 
  if(info.length>1)
  { 
   totalPage=info[info.length-1].totalPage; 
   var tbody_content="";//不初始化字符串"",会默认"undefined" 
   for(var i=0;i   { 
    tbody_content +="" 
    +""+(i+1+(currentPage-1)*pageSize)+"" 
    +""+info[i].title.substr(0,20)+"" 
    +""+info[i].address.substr(0,6)+"" 
    +""+info[i].quota_sign+"人" 
    +""+info[i].type+"" 
    +"/activity_edit.action?id="+info[i].id+"'>编辑" 
    +"" 
    $("#t_body").html(tbody_content); 
   } 
  }
  else
  { 
   $("#t_head").html(""); 
   $("#t_body").html(""+info.msg+"

");
  }
}
//清空数据
function clearDate()
{
  $("#t_body").html("");
}
//搜索活动
$("#searchActivity").click(function(){
  queryForPages();
});
//首页
$("#firstPage").click(function(){
  currentPage="1";
  queryForPages();
});
//上一页
$("#previous").click(function(){
  if(currentPage>1)
  {
   currentPage-- ;
  }
  queryForPages();
});
//下一页
$("#next").click(function(){
  if(currentPage  {
   currentPage++ ;
  }
  queryForPages();
});
//尾页
$("#last").click(function(){
  currentPage = totalPage;
  queryForPages();
});
});