实例代码讲解ajax实现的无刷新分页

前端技术 2023/09/06 AJAX

1、Ajax 无刷新页面的好处：提供良好的客户体验，通过 Ajax 在后台从数据库中取得数据并展示，取缔了等待加载页面而出现的空白状态；

2、那么，Ajax 无刷新页面是运行在动态页面（.php）？还是静态页面（.html/.htm/.shtml）？答案是：静态页面；

3、实现原理：通过前端 JS 脚本程序与 Ajax 相结合取得从动态页面返回的数据，并显示。

现在什么都讲究一个无刷新，就连分页也是如此，下面是小编日常整理的关于一段无刷新代码，希望能够帮到大家。

代码如下:

一.html代码部分:

<table class=\"table style-5\"> 
 <thead id=\"t_head\"> 
  <tr> 
   <th>序号</th> 
   <th>标题</th> 
   <th>地点</th> 
   <th>已报名</th> 
   <th>类别</th> 
   <th>操作</th> 
  </tr> 
</thead> 
<tbody id=\"t_body\"> 
<!-- ajax填充列表 -->
</tbody> 
</table> 
<button id=\"firstPage\">首页</button> 
<button id=\"previous\">上一页</button> 
<button id=\"next\">下一页</button> 
<button id=\"last\">尾页</button>

二.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<info.length-1;i++)
   { 
    tbody_content +=\"<tr>\" 
    +\"<td data-title=\'序号\' >\"+(i+1+(currentPage-1)*pageSize)+\"</td>\" 
    +\"<td data-title=\'标题\'>\"+info[i].title.substr(0,20)+\"</td>\" 
    +\"<td data-title=\'地点\'>\"+info[i].address.substr(0,6)+\"</td>\" 
    +\"<td data-title=\'已报名\'>\"+info[i].quota_sign+\"人</td>\" 
    +\"<td data-title=\'类别\'>\"+info[i].type+\"</td>\" 
    +\"<td data-title=\'操作\'><a href=\'<%=request.getContextPath()%>/activity_edit.action?id=\"+info[i].id+\"\'>编辑</a></td>\" 
    +\"</tr>\" 
    $(\"#t_body\").html(tbody_content); 
   } 
  }
  else
  { 
   $(\"#t_head\").html(\"\"); 
   $(\"#t_body\").html(\"<div style=\'height: 200px;width: 700px;padding-top: 100px;\' align=\'center\'>\"+info.msg+\"</div>\"); 
  } 
 } 
 //清空数据 
 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<totalPage)
  { 
   currentPage++ ; 
  } 
  queryForPages(); 
 }); 
 //尾页 
 $(\"#last\").click(function(){ 
  currentPage = totalPage; 
  queryForPages(); 
 }); 
});

以上代码是小编给大家介绍的ajax实现的无刷新分页，希望对大家有所帮助。

本文地址：https://www.stayed.cn/item/15065

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案