可定制的分页组件 Pagination.js

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)

小伍_哥
小伍_哥
有没有api啊,属性和方法的说明都没啊
Willian1st
Willian1st
ajax需要请求两次?一次总记录数,一次数据?
TavenLi
TavenLi
这个值得拥有 #Pagination.js#

暂无资讯

1
回答
vue-bootstrap-pagination 分页求助

1、问题:引用vue-bootstrap-pagination组件,报Property or method "pagination" is not def...

2018/11/08 15:52

没有更多内容

加载失败,请刷新页面

没有更多内容

SlidesJS基本使用方法_已整理

来源 MZB大豆博客 Slides – 是一个简单的,容易定制和风格化,的jQuery幻灯片插件。 Slides提供褪色或幻灯片过渡效果,图像淡入淡出,图像预压,自动生成分页,循环,自动播放的自定义等很多...

2015/01/01 12:54
79
0
DataTables_修改语言为中文及DOM介绍

效果图片 Data Tables: http://datatables.net/ Version: 1.10.0 Dom说明 定义表格控件在页面的显示顺序。 每个控件元素在数据表都有一个关联的单个字母。 l - 每页显示行数的控件 f - 检索条...

2015/05/02 19:46
5.5K
0
打造前端大秘宝系列之REDUX状态处理框架ZORO-插件介绍

这是该系列文章的第二篇了,距离上一篇过去已经有一周了,如果没有看过之前的文章,请点击下方的传送门 本系列文章传送门 打造前端大秘宝系列之REDUX状态处理框架ZORO-基本简介 今天主要的目...

2018/11/08 20:41
1
0
jq ajax分页插件:pagination -> 支持首页尾页跳转页、列表搜索分页正常

最终示例图: html代码(搜索块) ............................ <button type="submit" class="btn btn-success" id="btn_cz" name="" onclick="search()"> <i class="Hui-iconfont"></i...

2018/09/12 17:44
217
0
轮播图

最近沉迷于做轮播图无法自拔!!! 前端小沫沫推荐一个很好用的网站, swiper 里面有很多模板,经过我这几天的摸索,沉迷于成功后的喜悦无法自拔,怀着激动的心情跟大家分享一下。 查看演示以...

2018/07/17 14:30
71
0
jquery.pagination.js分页

jquery.pagination.js分页 序言 这一款js分页使用起来很爽,自己经常用,做项目时总是要翻以前的项目看,不方便,这里就把他写出来方便自己以后粘帖,也希望能分享给大家。 友情提示下:我有...

2014/01/06 16:58
284
0
asp.net+ajax+json来实现无刷新分页功能

现在做网站就是尽可能的提高用户体验,用户浏览网站尽可能不要刷新,响应速度尽可能的快,就是加载速度不好,也要告诉用户你已经很努力的在加载了(loading.....),下面来看看如何实现此功能 ...

2012/06/26 14:17
1K
0
模糊查询分页实现

模糊查询的分页 模糊查询返回的是一个list列表,若数据庞大时需要进行分页显示。以下案例将介绍数据的分页显示操作。 misty to search.jsp.java <%@ page language="java" import="java.uti...

2011/05/18 09:46
715
0
Laravel 易上手开发流程

其实是学习笔记,[皮一下~~]

2018/05/14 09:53
42
0

没有更多内容

加载失败,请刷新页面

返回顶部
顶部