“真分頁”與“假分頁”的實現方法

阿新 • • 發佈：2019-01-20

所謂的“真分頁”與“假分頁”，我想大概就是前者是在後臺的時候就將資料給分好，前臺顯示，每一次的點選“前一頁”、“下一頁”就向後臺傳送一次請求。而後者便是後臺將全部資料傳送給前臺，將資料繫結在控制元件上，利用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 值大於指定數的元素。

引數

描述

index

必需。規定要選擇的元素。

會選取 index 值大於指定數的元素。

之後的分頁效果主要是利用jquery的遍歷來實現的：

引數	描述
function(index,element)	必需。為每個匹配元素規定執行的函式。 index - 選擇器的 index 位置 element - 當前的元素（也可使用 "this" 選擇器）

引數

描述

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

“真分頁”與“假分頁”的實現方法

所謂的“真分頁”與“假分頁”，我想大概就是前者是在後臺的時候就將資料給分好，前臺顯示，每一次的點選“前一頁”、“下一頁”就向後臺傳送一次請求。而後者便是後臺將全部資料傳送給前臺，將資料繫結在控制元件上，利用jquery邏輯控制檢視的渲染,控制資料的顯隱來實現視覺上的分頁效

MiniUI前臺分頁，假分頁實現源碼

MiniUI 假分頁背景對於數據較少，無需後臺分頁的需求，可使用以下解決方案方案MiniUI提供了監聽事件，特別方便即可實現。源碼mini.parse(); var grid = mini.get("datagridTable"); // 獲取所有數據和總記錄數 { tot

Laravel分頁帶參數的實現方法

list desc pos turn append derby nat des lin 控制器： $data[‘type‘] = 5;$data[‘member_list‘] = Member::orderBy(‘id‘, ‘desc‘)->paginate(10);

Django個人部落格開發之分頁與Vue分頁

分頁介紹與邏輯由於當前開發的需求當中各種管理平臺的增多，各種各樣的列表需求逐漸增多，而往往資料量有很多，很難實現也沒有必要將所有的資料都羅列到一個前端頁面上，使用者用不到，也很浪費資源。所以我們有了分頁的需求，將資料分頁顯示。現在有1000條文章的資料需要展示在我們的計算機上。 1. 可以將

django 自定義分頁與bootstrap分頁結合

django中有自帶的分頁模組Paginator,想Paginator提供物件的列表，就可以提供每一頁上物件的方法。這裡的話不講解Paginator,而是自定義一個分頁類來完成需求： class Pagination(object): """用於Model欄位值的

matlab矩陣分塊與把分塊矩陣還原

A=rand(256,64); %將A分塊 B=mat2cell(A,ones(256/16,1)*16,ones(64/16,1)*16); %ones（a,b）為建立a行b列的值為1

微信小程式開發中列表頁載入下一頁以及下拉重新整理實現方法

微信小程式開發中列表頁載入下一頁以及下拉重新整理實現方法，微信列表頁常用功能有下拉重新整理，上劃載入更多，怎麼實現呢？直接上程式碼吧：列表頁js global.p = 1 var url = getApp().globalData.API_URL +'/a

linux 工具——終端分屏與vim分屏

preface：不知不覺在終端下學習幹活一年多，終端開多了成了習慣，之前嫌麻煩沒用分屏，而當真正用起來比想象中的簡單，終端下的分屏命令 tmux及vim自帶分屏命令vsp都相當不錯，加快乾活效率。 1、終端分屏tmux 功能：提供了強勁的、易於使用的命令列介面。可橫向和縱

vue巢狀路由與404重定向實現方法分析

第一部分： vue巢狀路由巢狀路由是什麼？巢狀路由就是在一個被路由過來的頁面下可以繼續使用路由，巢狀也就是路由中的路由的意思。比如在vue中，我們如果不使用巢狀路由，那麼只有一個<router-view>，但是如果使用，那麼在一個元件中就還有<router-view>，這也就構

【原始碼】QPSK調製與解調的一般實現方法

本程式碼的QPSK調製與解調過程沒有考慮噪聲的影響，是一種比較理想的設計方式。 %XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX %XXXX QPSK Modulation and

cocos2d-x 利用CCLabelTTF製作文字描邊與陰影效果的實現方法

感謝點評與關注，歡迎轉載與分享。勤奮努力，持之以恆！方法一： cocos2d-x 已經為我們封裝好了，方法就在類CCLabelTTF裡面。 /** enable or disable shadow for the label */ void enableS

SpringData JPA實現CRUD,分頁與多參數排序

method clas asc spring from pda des home 參數　　Spring Data 項目的目的是為了簡化構建基於 Spring 框架應用的數據訪問計數，包括非關系數據庫、Map-Reduce 框架、雲數據服務等等，SpringData JPA

Django restframwork實現自定義數據格式的分頁與搜索

模糊 ces none ota ntp model 簡單的 api ner 最近因為在做分頁時遇到的問題很多，頁浪費了好多時間，所以記錄一下。以後如遇到可用省去不必要的麻煩 restframwork中的官方文檔對分頁和搜索頁進行了詳細的介紹，但是我公司需要的return的

JSP分頁---假分頁的實現

昨天寫了一個真分頁的資料庫查詢，今天本來想寫個假分頁，但在瀏覽時候發現了一個寫的比較詳細的假分頁知識，下面分享一下：首先貼上原文連結--https://www.cnblogs.com/yfsmooth/p/4774326.html 首先還是來總結一下真假分頁的優缺點和特性吧。假分頁：從資料

分頁外掛pagehelper初使用，前端傳遞當前頁碼與每頁條數後臺接受實現分頁

最新的專案用到了pagehelper分頁外掛，在此做下筆記方便以後檢視！同時也希望能對別人產生幫助。 1.因為專案是maven進行管理的，所以：第一步就是在pom.xml檔案中引入pagehelper分頁外掛。 <dependency> <groupId>com

Extjs與struts2的jsonplugin實現分頁功能

步驟1、寫伺服器端程式碼，輸出json資料。 package com.voicesoft.agentbrowser.web.actions; import java.util.ArrayList; import java.util.HashMap; import jav

wordpress主題首頁與分類頁的分頁怎樣實現？

製作wordpress主題時，首頁、分類頁、搜尋頁的分頁效果是需要考量的，尤其是wordpress部落格類主題，首頁也是需要考慮在內的。如果分頁設定不好，就有可能出現有些分頁出現404的現象，我就曾經碰到過這樣一個主題：首頁分頁效果正常，分類頁後幾頁出現404現象。下面提供2

Django處理URL過程與網站分頁功能實現

首先如題，django作為幾乎所有的python程式設計師都熟知的開源框架，那它是怎麼處理一個url的。原理是什麼。1.Django使用的是根URLconf模組。這個值通常是通過ROOT_URLCONF設定（在…/settings.py檔案中）。2.Django載入URL

JS 實現簡單的Table表格分頁效果（假分頁）

單純的JS實現分頁先來說說思路： 1.就是 window.onload的時候呼叫方法進行主頁的分頁這裡要先獲取表格的總行數然後在減去表格的頭部和尾部等其他一些沒有儲存資料的行數先把所有的資料行根據根據TR的 ID 樣式都調整為隱藏

oracle實現分頁與mysql實現分頁功能

1.oracle所用的sql語句 String sql = "select * from ( select t.*, ROWNUM RN from ( select * from tblmetada

“真分頁”與“假分頁”的實現方法

語法

相關推薦