jquery.pagination.js的使用

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接口

方法	参数	说明
getPageCount()	无	获取总页数
setPageCount(page)	page：页数	设置总页数
getCurrent()	无	获取当前页
filling()	无	填充数据，参数为页数

示例用法

$(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');
}
});