html頁面

//要顯示內容表格
<table id="gifts">
            <tr class=‘first‘>
                <th>時間</th>
                <th>獲得獎勵</th>
            </tr>
            <tr>
                <td>2018-01-30 00:00:00</td>
                <td>2000金幣</td>
            </tr>

</table>

//
 
顯示分頁的 page是自己定義的樣式
<div class="liuyanpage page">  </div>
   

插件最後生成的html結構

來，開始學習使用這個插件了

1、首先引入

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

2、自定義插件

$(‘.liuyanpage‘).pagination({
                pageCount: Math.ceil(counts
 
/one_page_show_nums),//counts為你要顯示的數據的總條數，one_page_show_nums為你每頁想要顯示的條數
                coping: true,
                homePage: ‘首頁‘,
                endPage: ‘末頁‘,
                prevContent: ‘上一頁‘,
                nextContent: ‘下一頁‘,
                count:2
});

3、配置的參數

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

api接口

示例用法

$(function () {
    $(‘.liuyanpage‘).pagination({
        pageCount: <?# $counts?>/8,
        coping: true,
        homePage: ‘首頁‘,
        endPage: ‘末頁‘,
        prevContent: ‘上一頁‘,
        nextContent: ‘下一頁‘,
        count:2,
        callback:PageCallback
    });

//翻頁
function PageCallback(index, jq) {
    myapi(index);

}
//請求
function myapi(current) {
    $.post(url,{
        page:current
    },function(data){
        if(data.code!=0){

        }else{
            var htm=‘‘;
            for(var i=0;i<data.mylist.length;i++){
                htm+=‘<tr><td>‘+data.mylist[i][‘createtime‘]+‘</td><td>‘+data.mylist[i][‘name‘]+‘</td></tr>‘
            }
            $("#tc5 #gifts tr:not(.first)").remove();
            $("#tc5 #gifts").append(htm);//將返回的數據追加到表格   
        }
    },‘json‘);
}
});

jquery.pagination.js的使用