“真分页”与“假分页”的实现方法

最新推荐文章于 2024-08-17 17:39:27 发布

呢喃北上

最新推荐文章于 2024-08-17 17:39:27 发布

阅读量8.5k

点赞数 4

分类专栏： jQuery JavaWeb 文章标签：分页 jquery JavaWeb mybatis

本文链接：https://blog.csdn.net/qq_33764491/article/details/78134020

版权

JavaWeb 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

jQuery

3 篇文章 0 订阅

订阅专栏

所谓的“真分页”与“假分页”，我想大概就是前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。

两种方法都可以使用，各有利弊。“真分页”显然是效率更高，面对庞大的数据量也能够从容自若，但是缺点便是每次都需要和后台交互。“假分页”不需要和后台交互，但是一旦面对大数据量时，加载将十分缓慢，影响用户的体验。

由于是个人平时的练习，数据量不大，所以在我个人的项目中都使用了。下面记录我具体的实现方法。

“真分页”：利用mybatis逆向自带的分页方法实现，代码量十分的少，用起来也很方便。

1.在实体example类中，定义两个参数startRow、pageSize。getter\setter.

2.在对应实体类mapper.xml的selectByExample方法中加入如下限制条件：

 <if test="startRow != null and pageSize != null and pageSize != 0">
 limit #{startRow},#{pageSize}
 </if>

3.在sevice层的实现类方法中设置方法参数（我在这里固定了每页8条，也可以自行定义）

        @Override
	public List<News> selectNewsList(int startRow) {
		// TODO Auto-generated method stub
		NewsExample newsExample = new NewsExample();
		newsExample.setPageSize(8);//每页显示八条新闻
		newsExample.setStartRow(startRow);
		List<News> newsList = newsMapper.selectByExample(newsExample);
		return newsList;
	}

4.controller的逻辑判断和分页初始值的赋值

        @RequestMapping("selectNewsList")
	public String showNewsList(Integer pageNo,HttpSession session){
		int newsNums = newsService.countNews();//数据库中新闻的有效条目数
		int pageNums;//页码的最大值（总数）
		//如果能够整除，说明新闻最大页数是newsNums/8,不能够整除还需要加一页内容显示
		if (newsNums%8==0) {
			pageNums = newsNums/8;
		} else {
			pageNums = newsNums/8+1;
		}
		session.setAttribute("pageNums", pageNums);
		//判断当前页码，如果是首页，页面为空
		if (pageNo!=null) {
			//通过计算分页的第一条资讯的开始编号，来执行分页的方法
			List<News> newsList = newsService.selectNewsList((pageNo-1)*8);
			session.setAttribute("newsList", newsList);	
			session.setAttribute("pageNo", pageNo);
		} else {
			List<News> newsList = newsService.selectNewsList(0);
			session.setAttribute("newsList", newsList);
			session.setAttribute("pageNo", 1);//页码默认是从一开始的。
		}
		List<Type> typeList = typeService.selectTypeList();
		session.setAttribute("typeList", typeList);
		List<News> topList = newsService.selectNewsTop();
		session.setAttribute("topList", topList);
		return "news";
	}

jsp:        <c:choose>  
          <c:when test="${pageNo>1}">          
          <a href="selectNewsList.action">首页</a>   
          <a href="selectNewsList.action?pageNo=${pageNo-1}">上一页</a>   
          </c:when>  
       </c:choose>  
	当前页数:[${pageNo}/${pageNums}]   
       <c:choose>  
          <c:when test="${pageNo!=pageNums}">  
          <a href="selectNewsList.action?pageNo=${pageNo+1}">下一页</a>   
          <a href="selectNewsList.action?pageNo=${pageNums}">末页</a>  
          </c:when>    
       </c:choose>  





“假分页”：利用jquery来实现。参考如下实例，很容易理解。
首页的效果利用jquery :gt选择器来实现：


语法
$(":gt(index)")

    
    
参数 
描述

index 

必需。规定要选择的元素。

会选取 index 值大于指定数的元素。






之后的分页效果主要是利用jquery的遍历来实现的：

    
    
参数 
描述

function(index,element) 

必需。为每个匹配元素规定运行的函数。

        
        index - 选择器的 index 位置
element - 当前的元素（也可使用 "this" 选择器）



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
 $(document).ready(function(){
   $("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏。
   var total_q=$("ul li").index()+1;//总数据
   var current_page=4;//每页显示的数据
   var current_num=1;//当前页数
   var total_page= Math.ceil(total_q/current_page);//总页数   
   var next=$(".next");//下一页
   var prev=$(".prev");//上一页
   $(".total").text(total_page);//显示总页数
   $(".current_page").text(current_num);//当前的页数
   //下一页
   $(".next").click(function(){
    if(current_num>=total_page){
      return false;//如果大于等于总页数就禁用下一页
     }
     else{
      $(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
      $.each($('ul li'),function(index,item){
       var start = current_page* (current_num-1);//起始范围
       var end = current_page * current_num;//结束范围
       if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
        $(this).show();
       }else {
        $(this).hide(); 
       }
      });
     }
   });
   //上一页方法
   $(".prev").click(function(){
     if(current_num==1){
      return false;
     }else{
      $(".current_page").text(--current_num);
      $.each($('ul li'),function(index,item){
       var start = current_page* (current_num-1);//起始范围
       var end = current_page * current_num;//结束范围
       if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
        $(this).show();
       }else {
        $(this).hide(); 
       }
      });  
     }
    })
 })
</script>
<style type="text/css">
 .main{width:800px;zoom:1;margin:0 auto;}
 .item{width:800px;overflow:hidden;}
 ul{padding:0;width:860px;zoom:1;}
 .clear{zoom:1;}
 .clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
 ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
 .page_btn{padding-top:20px;}
 .page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
 .page_box{float:right;}
 .num{padding:0 10px;}
</style>
</head>
<body>
 <div class="main">
  <div class="item">
   <ul class="clear">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
    <li>21</li>
    <li>22</li>
    <li>23</li>
    <li>24</li>
    <li>25</li>
    <li>26</li>
    <li>27</li>
    <li>28</li>
   </ul>
  </div>
  <div class="page_btn clear">
   <span class="page_box">
    <a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
   </span>
  </div>
 </div><!--main-->
</body>
</html>

以上。
纯分页sql语句 参考：http://blog.csdn.net/qq_33764491/article/details/76691681