Pagination.js 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Pagination.js 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Pagination.js 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 八克白
适用人群 未知
收录时间 2015-01-14

软件简介

Pagination.js 是一个简单、可定制的分页组件。

paginationjs.com

paginationjs

Usage

Normal

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 195],
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Only page numbers

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
    pageSize: 5,
    showPrevious: false,
    showNext: false,
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Show "go" input & button

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 40],
    pageSize: 5,
    showGoInput: true,
    showGoButton: true,
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Auto hide previous & next button

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
    pageSize: 5,
    autoHidePrevious: true,
    autoHideNext: true,
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Mini

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 50],
    pageSize: 5,
    showPageNumbers: false,
    showNavigator: true,
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Asynchronous or JSONP

$('#demo').pagination({
    dataSource: 'https://api.flickr.com/services/feeds/photos_public.gne?tags=cat&tagmode=any&format=json&jsoncallback=?',
    locator: 'items',
    totalNumber: 120,
    pageSize: 20,
    ajax: {
        beforeSend: function(){
            dataContainer.html('Loading data from flickr.com ...');
        }
    },
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Specify default

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 35],
    pageSize: 5,
    pageNumber: 3,
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Format result data

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 100],
    pageSize: 8,
    formatResult: function(data){
        var result = [];
        for(var i = 0, len = data.length; i < len; i++){
            result.push(data[i] + ' - good guys');
        }
        return result;
    },
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Another format result data

$('#demo').pagination({
    dataSource: [{a :1}, {a :2}, {a :3}, {a :4}, ... , {a :50}],
    pageSize: 8,
    formatResult: function(data){
        for(var i = 0, len = data.length; i < len; i++){
            data[i].a = data[i].a + ' - bad guys';
        }
    },
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Format navigator

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 15],
    pageSize: 5,
    showNavigator: true,
    formatNavigator: '<span style="color: #f00"><%= currentPage %></span> st/rd/th, <%= totalPage %> pages, <%= totalNumber %> entries',
    position: 'top',
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

Format "go" input

$('#demo').pagination({
    dataSource: [1, 2, 3, 4, 5, 6, 7, ... , 25],
    pageSize: 5,
    showGoInput: true,
    showGoButton: true,
    formatGoInput: 'go to <%= input %> st/rd/th',
    callback: function(data, pagination){
        // template method of yourself
        var html = template(data);
        dataContainer.html(html);
    }
})

展开阅读全文

代码

评论

点击加入讨论🔥(3) 发布并加入讨论🔥
暂无内容
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
3 评论
37 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部