bootstrap中，使用Pagination處理前後端分頁

      在前端界面編輯過程中，我們經常遇到需要進行分頁處理的情況，很多部落格都介紹了表格進行前後端分頁處理的方法，本部落客要介紹非表格處理時(例如template)，使用Pagination處理前後端分頁方法。

    不管前端分頁還是後端分頁，bootstrap自帶的Pagination元件能夠簡化處理的方法，通過自帶的回調函數，可以快速擷取目前頁對應的頁碼，避免自己對“前一頁”、“後一頁”、以及頁碼點選事件進行處理。下面通過示例看一下。

在頁面中，我們首先插入來自bootstrap的分頁元件

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li>
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  aria-label="Previous">
        <span aria-hidden="true">«</span>
      </a>
    </li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >1</a></li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >2</a></li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >3</a></li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >4</a></li>
    <li><a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow" >5</a></li>
    <li>
      <a href="#" target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  target="_blank" rel="external nofollow"  aria-label="Next">
        <span aria-hidden="true">»</span>
      </a>
    </li>
  </ul>
</nav>
           

 在js頁面中，我們對pagination事件進行處理其主要的邏輯代碼為：

$(".pagination").pagination(totalData, { //totalData代表資料總數，比如查詢資料庫得到200條資料，同常定義為全局變量,
					//由背景查詢得到的個數決定。
               	 
                	callback:function(data){  //回調函數中的data表示，目前點選的頁面，但是有一點需要注意，data的值永遠比目前點選數小1
               		 				//比如，目前點選的2，則data傳回的值為1，點選1時，傳回值為0，
							//需要我們背景對其中的邏輯關系進行處理
               		
                		paginationClick(data);  //回調函數的處理事件，點選“頁碼”時，觸發事件的處理方法，包括前端處理方法或者後端處理方法
                    },
                   num_edge_entries: 1,  //兩側顯示的首尾分頁的條目數
                   num_display_entries: 4,  //連續分頁主體部分顯示的分頁條目數 
                   items_per_page:10 //每頁顯示資料的數量
               });
           

    對于前段分頁還是後端分頁，主要是看傳回資料量的大小，如果資料量比較大的話，盡量采用背景分頁，資料量比較小的話，采用前段分頁，但對于pagination分頁處理，基本上到此結束了，對于pagination裡面的具體參數，大家可以搜尋“pagination 分頁”檢視更詳細的參數。對于前後端分頁處理邏輯位于上面代碼中的paginationClick(data)部分。

    在後端分頁時，我們将每頁顯示的條目數量，起始頁的位置，查詢條件傳到背景，通過搜尋，查詢得到總的資料個數（需要指派給‘totalData’，決定前端頁面顯示頁碼的個數），查詢得到的資料内容（用于前端界面顯示），注意與前端分頁不同的是，這裡的查詢内容隻傳回查詢頁面的資料，個數為‘items_per_page’。

    在前端分頁處理時，與後端分頁不同的是，我們隻将查詢條件傳輸到背景，通過搜尋，查詢全部符合條件的全部資料，一次性傳回給前端（可以定義全局變量用于存儲資料），在js中，我們對計算所有資料的數量，指派給‘totalData’，pagination元件會自動計算出顯示頁碼的數量，然後通過paginationClick（data）方法，計算每頁要顯示的資料，并渲染到前端界面。

    對于前背景分頁，pagination處理的方法及參數設定基本上相同，由于不同的項目，對資料的處理方式不同，這篇部落格中，前後端分頁的具體邏輯沒有給出demo，隻給出了一個自己了解的一個思路（個人了解），希望對大家有所幫助。