1、引入jQuery和jQuery.pagination.js文件

<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<script type="text/javascript" src="js/jquery.pagination.js"></script>

2、自定義分頁插件

$(function(){
$('#pagination').pagination({
        pageCount:40,
        jump:true,
        coping:false,
        count:2,
        prevContent:'<上一頁',
        nextContent:'下一頁>',
        jumpBtn:'確定',
        callback:callbackAjax
    });
})

注意：自定義參數詳情參考點擊
3、自定義數據綁定模板

$(function(){
  var callbackAjax = function(api){
     //獲取當前頁碼
     var current = api.getCurrent();
     //請求當前頁要展示的數據
     var uel = xxx;//請求數據的地址
     $.post(url,{
         currentParam ： current
     },function(data){
        //將數據和HTML拼接并添加到頁面渲染
        //我采用js模板引擎 artTemplate進行數據綁定
        $('#goods_list').html(template('goods_list_temp',data));
     },'json');  
  }


   //執行callbackAjax
   $('#pagination').pagination({
        pageCount:40,
        jump:true,
        coping:false,
        count:2,
        prevContent:'<上一頁',
        nextContent:'下一頁>',
        jumpBtn:'確定',
        callback:callbackAjax
    });
   
})

注意：pagination詳細參數、template使用方法

獲取當前頁面的頁碼getCurrent()、獲取總頁數getPageCount()等方法，必須在回調函數中調用執行！

4、css樣式

#pagination{
            background: #e3e3e3;
            height: 40px;
            line-height: 40px;
             990px;
            margin-top: 20px;
            text-align: right;
        }
        #pagination .active{
            color: #c41929;
            border: 1px solid transparent;
            background: #e3e3e3;
            font-size: 14px;
            padding: 3px 4px;
            margin-right: 10px;
        }
        #pagination a,#pagination span{
            border: 1px solid #cdcdcd;
            background: #fff;
            font-size: 14px;
            padding: 3px 4px;
            color: #000;
            margin-right: 10px;
        }
        #pagination a.jump-btn{
            margin-right: 20px;
            margin-left: 20px;
        }
        #pagination input{
            height: 18px;
            line-height:18px;
             30px;
        }

5、HTML

<div id="pagination">
            </div>

6、最終結果

參數配置

參數	默認值	說明
pageCount	9	總頁數
totalData	0	數據總條數
current	1	當前第幾頁
showData	0	每頁顯示的條數
prevCls	'prev'	上一頁class
nextCls	'next'	下一頁class
prevContent	'<'	上一頁節點內容
nextContent	'>'	下一頁節點內容
activeCls	'active'	當前頁選中狀態class名
count	3	當前選中頁前后頁數
coping	false	是否開啟首頁和末頁，值為boolean
isHide	false	總頁數為0或1時隱藏分頁控件
keepShowPN	false	是否一直顯示上一頁下一頁
homePage	''	首頁節點內容，默認為空
endPage	''	尾頁節點內容，默認為空
jump	false	是否開啟跳轉到指定頁數，值為boolean類型
jumpIptCls	'jump-ipt'	文本框內容
jumpBtnCls	'jump-btn'	跳轉按鈕class
jumpBtn	'跳轉'	跳轉按鈕文本內容
callback	function(){}	回調函數，參數"index"為當前頁

api接口

方法	參數	說明
getPageCount()	無	獲取總頁數
setPageCount(page)	page：頁數	設置總頁數
getCurrent()	無	獲取當前頁
filling()	無	填充數據，參數為頁數

其他

[我的博客，歡迎交流！](http://rattenking.gitee.io/stone/index.html)

[我的CSDN博客，歡迎交流！](https://blog.csdn.net/m0_38082783)

[微信小程序專欄](https://blog.csdn.net/column/details/18335.html)

[前端筆記專欄](https://blog.csdn.net/column/details/18321.html)

[微信小程序實現部分高德地圖功能的DEMO下載](http://download.csdn.net/download/m0_38082783/10244082)

[微信小程序實現MUI的部分效果的DEMO下載](http://download.csdn.net/download/m0_38082783/10196944)

[微信小程序實現MUI的GIT項目地址](https://github.com/Rattenking/WXTUI-DEMO)

[微信小程序實例列表](http://blog.csdn.net/m0_38082783/article/details/78853722)

[前端筆記列表](http://blog.csdn.net/m0_38082783/article/details/79208205)

[游戲列表](http://blog.csdn.net/m0_38082783/article/details/79035621)

總結

以上是生活随笔為你收集整理的jquery分页插件pagination.js的使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。