最近使用分頁這個基礎效果較為頻繁，而項目前端頁面使用的是純靜態的HTML，自己之前寫的JSP中的分頁就用不成了；項目中也引入了Bootstrap，本來想使用Bootstrap中的分頁樣式，但發現其樣式與這個項目的風格太不搭，再去修改其樣式，還要控制其頁碼控制首頁和末頁不能再點擊上一頁和下一頁，再麻煩了，索性就使用這個jQuery的分頁插件配合着ajax來實現，使用過后感覺還不錯。
使用步驟
1、引入以下的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文件后面
2、在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有取數組指定一部分數據的方法，所以操作不算難性能也還可以，我就是在這個回調函數中取數組對應一部分的數據。
3、在body標簽中加入以下格式的html代碼
<div id="news-Pagination-1"></div>
寫一個div來存放這個分頁工具即可。
最后看一看這個分頁工具的效果圖，這個默認的效果，就不看我做的項目中的效果了
