jquery.pagination.js的使用

Posted 2020-11-06 提提_qff

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