码迷,mamicode.com
首页 > Web开发 > 详细

jquery.pagination.js的使用

时间:2018-05-18 20:06:05      阅读:629      评论:0      收藏:0      [点我收藏+]

标签:math   ext   填充   开始   idt   data   引入   文本   url   

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

 

jquery.pagination.js的使用

标签:math   ext   填充   开始   idt   data   引入   文本   url   

原文地址:https://www.cnblogs.com/qiufang/p/9020145.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!