使用jQuery Pagination Plugin實現分頁效果

最近使用分頁這個基礎效果較爲頻繁，而項目前端頁面使用的是純靜態的HTML，本身以前寫的JSP中的分頁就用不成了；項目中也引入了Bootstrap，原本想使用Bootstrap中的分頁樣式，但發現其樣式與這個項目的風格太不搭，再去修改其樣式，還要控制其頁碼控制首頁和末頁不能再點擊上一頁和下一頁，再麻煩了，索性就使用這個jQuery的分頁插件配合着ajax來實現，使用事後感受還不錯。

使用步驟

一、引入如下的js和css文件

<link rel="stylesheet" href="pagination.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.pagination.js"></script>

這個CSS文件就是jQuery Pagination Plugin 的樣式文件，修改其樣式仍是挺簡單的，在這個文件裏直接改就好了，由於我如今作的這個項目的界面風格很奇怪，因此我就在這裏修改讓分頁插件的樣式與項目統一，修改起來並非太難，class名也能夠見名知意。

這裏再提示一下插件的js文件引用必定要放在jQuery的js文件後面

二、在head標籤中加入如下js代碼

      function showPage(total,pageSize){
            //分頁
            $('#news-Pagination-1').pagination(total, {      //總記錄數
                items_per_page:pageSize,          //每頁顯示多少條記錄
                  next_text:'下一頁',
                  prev_text:'上一頁',
                    num_edge_entries:2,  //鏈接分頁主體的條數
                callback:handlePaginationClick
             });
      
          }
        function handlePaginationClick(new_page_index, pagination_container) {
            //清除以前的數據
            $('div[class=b3-third-one-today-right]').children().empty();
            show68(show68_pageSize,new_page_index+1);
            return false;
        }

show68 是我寫的一個Ajax方法，須要改爲項目實際須要的Ajax請求方法

在show68中最後一句須要在第一次使用時調用 showPage：

var j=1;

------------------

if(j==1){
        //第一次調用
        j++;
        showPage(data.total,pageSize);
}

 

參數配置：

total 總記錄數

items_per_page 每頁記錄數（就是pageSize）

num_display_entries 最多顯示的頁碼數 
next_text ‘下一頁’顯示的文字 
next_show_always 若是設置爲false‘下一頁’按鈕只有在還能增長頁碼的狀況下才顯示 默認 true
prev_show_always 若是設置爲false‘上一頁’按鈕只有在還能導航到前一頁的狀況下才顯示 默認 true
prev_text ‘上一頁’顯示的文字

還有更多配置項能夠查看  https://github.com/gbirke/jquery_pagination  

總來講該插件只需傳給它總記錄數和每頁顯示的大小這兩個參數便可。

注意：new_page_index這個參數對應的就是當前頁，不須要咱們去指點當前是那一頁，可是其值使用從0開始的（當前頁碼-1），後臺咱們的分頁方法通常是對應當前的頁碼的，因此傳給後臺須要+1。

callback的值是說明回調函數是哪一個，咱們能夠在這個回調函數中去調用分頁的ajax，這樣效果就是每點擊一頁，就會去請求後臺，是一次其實也不侷限於必定要在回調函數中使用ajax，例如我遇到一個特別奇葩的需求，是一個將全部數據查回來放在js的一個數組中，而後分頁就是對這個數組取對應的一個區間的數據，還好這個數據量並非很大，js有取數組指定一部分數據的方法，因此操做不算難性能也還能夠，我就是在這個回調函數中取數組對應一部分的數據。

三、在body標籤中加入如下格式的html代碼

<div id="news-Pagination-1"></div>

寫一個div來存放這個分頁工具便可。

 最後看一看這個分頁工具的效果圖，這個默認的效果，就不看我作的項目中的效果了