jquery的分页插件pagination的使用

标签: jquery pagination 插件 分页
970人阅读 评论(2) 收藏 举报
分类:

引入

在jq后面引入pagination插件即可

    <script src="js/jquery.js"></script>
    <script src="js/jquery.pagination.js"></script>

使用

  • 调用方法
$(selector).pagination(option, callback);
  • 回调和初始化
    $(selector).pagination({
       callback: function(api){
           //参数api为函数返回值,详情请查看下面的相关参数的api的值
           console.log('点击页码调用该回调'); //把请求接口函数放在这儿,每次点击请求一次
        }
    }, function(){
        console.log('初始化'); //插件初始化时调用该回调,比如请求第一次接口来初始化分页配置
    });

相关参数

  • options(参数配置)
参数 默认值 说明
pageCount 9 总页数
totalData 0 数据总条数
current 1 当前第几页
showData 0 每页显示的条数
prevCls ‘prev’ 上一页class
nextCls ‘next’ 下一页class
prevContent ‘<’ 上一页节点内容
nextContent ‘>’ 下一页节点内容
activeCls ‘active’ 当前页选中状态class名
count 3 当前选中页前后页数
coping false 是否开启首页和末页,值为boolean
isHide false 总页数为0或1时隐藏分页控件
keepShowPN false 是否一直显示上一页下一页
homePage 首页节点内容,默认为空
endPage 尾页节点内容,默认为空
jump false 是否开启跳转到指定页数,值为boolean类型
jumpIptCls ‘jump-ipt’ 文本框内容
jumpBtnCls ‘jump-btn’ 跳转按钮class
jumpBtn ‘跳转’ 跳转按钮文本内容
callback function(){} 回调函数,参数”index”为当前页

- 回调callback的返回值api的相关参数

方法 参数 说明
getPageCount() 获取总页数
setPageCount(page) page:页数 设置总页数
getCurrent() 获取当前页

使用说明

  • 当前方法的第一个值是对象,option的相关参数可以设置当前对象传入即可,比如设置总页数$(selector).pagination({pageCount:100});
  • 如果需要异步请求,可以在callback里面获取当前点击的页数,然后通过ajax请求页面

插件代码

由于插件的代码不是很长,又是我们国人mss写的,我直接把代码粘贴出来。
本人更新:调整了一下分页按钮的位置,增加...点击事件,可以直接加count或者减count(默认是3)

/**
 * pagination分页插件
 * @version 1.5.0
 * @author mss
 * @url https://github.com/Maxiaoxiang
 *
 * @调用方法
 * $(selector).pagination(option, callback);
 * -此处callback是初始化调用,option里的callback才是点击页码后调用
 *
 * -- example --
 * $(selector).pagination({
 *     ...
 *     callback: function(api){
 *         console.log('点击页码调用该回调'); //把请求接口函数放在这儿,每次点击请求一次
 *     }
 * }, function(){
 *     console.log('初始化'); //插件初始化时调用该回调,比如请求第一次接口来初始化分页配置
 * });
 */
;
(function (factory) {
    if (typeof define === "function" && (define.amd || define.cmd) && !jQuery) {
        // AMD或CMD
        define(["jquery"], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node/CommonJS
        module.exports = function (root, jQuery) {
            if (jQuery === undefined) {
                if (typeof window !== 'undefined') {
                    jQuery = require('jquery');
                } else {
                    jQuery = require('jquery')(root);
                }
            }
            factory(jQuery);
            return jQuery;
        };
    } else {
        //Browser globals
        factory(jQuery);
    }
}(function ($) {

    //配置参数
    var defaults = {
        totalData: 0, //数据总条数
        showData: 0, //每页显示的条数
        pageCount: 9, //总页数,默认为9
        current: 1, //当前第几页
        prevCls: 'prev', //上一页class
        nextCls: 'next', //下一页class
        prevContent: '<', //上一页内容
        nextContent: '>', //下一页内容
        activeCls: 'active', //当前页选中状态
        coping: false, //首页和尾页
        isHide: false, //当前页数为0页或者1页时不显示分页
        homePage: '', //首页节点内容
        endPage: '', //尾页节点内容
        keepShowPN: false, //是否一直显示上一页下一页
        count: 3, //当前页前后分页个数
        jump: false, //跳转到指定页数
        jumpIptCls: 'jump-ipt', //文本框内容
        jumpBtnCls: 'jump-btn', //跳转按钮
        jumpBtn: '跳转', //跳转按钮文本
        callback: function () {} //回调
    };

    var Pagination = function (element, options) {
        //全局变量
        var opts = options, //配置
            current, //当前页
            $document = $(document),
            $obj = $(element); //容器

        /**
         * 设置总页数
         * @param {int} page 页码
         * @return opts.pageCount 总页数配置
         */
        this.setPageCount = function (page) {
            return opts.pageCount = page;
        };

        /**
         * 获取总页数
         * 如果配置了总条数和每页显示条数,将会自动计算总页数并略过总页数配置,反之
         * @return {int} 总页数
         */
        this.getPageCount = function () {
            return opts.totalData && opts.showData ? Math.ceil(parseInt(opts.totalData) / opts.showData) : opts.pageCount;
        };

        /**
         * 获取当前页
         * @return {int} 当前页码
         */
        this.getCurrent = function () {
            return current;
        };

        /**
         * 填充数据
         * @param {int} 页码
         */
        this.filling = function (index) {
            var html = '';
            current = parseInt(index) || parseInt(opts.current); //当前页码
            var pageCount = this.getPageCount(); //获取的总页数
            if (current >= opts.count + 2 && current != 1 && pageCount != opts.count) {
                var home = opts.coping && opts.homePage ? opts.homePage : '1';
                html += opts.coping ? '<a href="javascript:;" data-page="1">' + home + '</a><!--<span class="more-prev">...</span>--><a class="more-prev" href="javascript:;" data-page="'+ (current-opts.count) +'">...</a>' : '';
            }
            if (opts.keepShowPN || current > 1) { //上一页
                html += '<a href="javascript:;" class="' + opts.prevCls + '">' + opts.prevContent + '</a>';
            } else {
                if (opts.keepShowPN == false) {
                    $obj.find('.' + opts.prevCls) && $obj.find('.' + opts.prevCls).remove();
                }
            }
            var start = (current - opts.count) <= 1 ? 1 : (current - opts.count);
            var end = (current + opts.count) >= pageCount ? pageCount : (current + opts.count);
            for (; start <= end; start++) {
                if (start <= pageCount && start >= 1) {
                    if (start != current) {
                        html += '<a href="javascript:;" data-page="' + start + '">' + start + '</a>';
                    } else {
                        html += '<span class="' + opts.activeCls + '">' + start + '</span>';
                    }
                }
            }
            if (opts.keepShowPN || current < pageCount) { //下一页
                html += '<a href="javascript:;" class="' + opts.nextCls + '">' + opts.nextContent + '</a>'
            } else {
                if (opts.keepShowPN == false) {
                    $obj.find('.' + opts.nextCls) && $obj.find('.' + opts.nextCls).remove();
                }
            }
            if (current + opts.count < pageCount && current >= 1 && pageCount > opts.count) {
                var end = opts.coping && opts.endPage ? opts.endPage : pageCount;
                html += opts.coping ? '<!--<span class="more-next">...</span>--><a class="more-prev" href="javascript:;" data-page="'+ (current+opts.count) +'">...</a><a href="javascript:;" data-page="' + pageCount + '">' + end + '</a>' : '';
            }
            html += opts.jump ? '<input type="text" class="' + opts.jumpIptCls + '"><a href="javascript:;" class="' + opts.jumpBtnCls + '">' + opts.jumpBtn + '</a>' : '';
            $obj.empty().html(html);
        };

        //绑定事件
        this.eventBind = function () {
            var that = this;
            var pageCount = that.getPageCount(); //总页数
            var index = 1;
            $obj.off().on('click', 'a', function () {
                if ($(this).hasClass(opts.nextCls)) {
                    if ($obj.find('.' + opts.activeCls).text() >= pageCount) {
                        $(this).addClass('disabled');
                        return false;
                    } else {
                        index = parseInt($obj.find('.' + opts.activeCls).text()) + 1;
                    }
                } else if ($(this).hasClass(opts.prevCls)) {
                    if ($obj.find('.' + opts.activeCls).text() <= 1) {
                        $(this).addClass('disabled');
                        return false;
                    } else {
                        index = parseInt($obj.find('.' + opts.activeCls).text()) - 1;
                    }
                } else if ($(this).hasClass(opts.jumpBtnCls)) {
                    if ($obj.find('.' + opts.jumpIptCls).val() !== '') {
                        index = parseInt($obj.find('.' + opts.jumpIptCls).val());
                    } else {
                        return;
                    }
                } else {
                    index = parseInt($(this).data('page'));
                }
                that.filling(index);
                typeof opts.callback === 'function' && opts.callback(that);
            });
            //输入跳转的页码
            $obj.on('input propertychange', '.' + opts.jumpIptCls, function () {
                var $this = $(this);
                var val = $this.val();
                var reg = /[^\d]/g;
                if (reg.test(val)) $this.val(val.replace(reg, ''));
                (parseInt(val) > pageCount) && $this.val(pageCount);
                if (parseInt(val) === 0) $this.val(1); //最小值为1
            });
            //回车跳转指定页码
            $document.keydown(function (e) {
                if (e.keyCode == 13 && $obj.find('.' + opts.jumpIptCls).val()) {
                    var index = parseInt($obj.find('.' + opts.jumpIptCls).val());
                    that.filling(index);
                    typeof opts.callback === 'function' && opts.callback(that);
                }
            });
        };

        //初始化
        this.init = function () {
            this.filling(opts.current);
            this.eventBind();
            if (opts.isHide && this.getPageCount() == '1' || this.getPageCount() == '0') $obj.hide();
        };
        this.init();
    };

    $.fn.pagination = function (parameter, callback) {
        if (typeof parameter == 'function') { //重载
            callback = parameter;
            parameter = {};
        } else {
            parameter = parameter || {};
            callback = callback || function () {};
        }
        var options = $.extend({}, defaults, parameter);
        return this.each(function () {
            var pagination = new Pagination(this, options);
            callback(pagination);
        });
    };

}));
查看评论

ASP.NET MVC+Bootstrap分页

-
  • 1970年01月01日 08:00

jQuery DataTables插件分页允许输入页码跳转

项目中使用jQuery DataTables插件来实现分页表格,但是默认的分页样式不能输入页码进行跳转,在页数非常多的时候使用很不方便,最主要的还是没有达到产品部门的设计要求,所以我需要寻找相应的解决...
  • alanzyy
  • alanzyy
  • 2016-12-27 15:58:26
  • 4572

jQuery Pagination Plugin

介绍下jQuery Pagination Plugin的使用,以及扩展加入总页数和跳转功能。 1.jQuery Pagination Plugin的使用。 导入两个js文件:jquery.min.js...
  • licheng989
  • licheng989
  • 2015-07-23 11:53:37
  • 1003

jquery分页插件pagination.js的使用

jquery分页插件pagination.js的使用
  • m0_38082783
  • m0_38082783
  • 2017-06-26 13:32:15
  • 2981

<em>jquery.pagination.js</em> 下载

<em>jquery.pagination.js</em> 下载,优秀的jquery分页插件,使用IP代理国外网站下载而来... <em>jquery.pagination.js</em> 下载 会员到期时间: 剩余下载个数: 剩余C币: 剩余积分:0 ...
  • 2018年03月23日 00:00

jquery的分页插件pagination的使用

引入在jq后面引入pagination插件即可 使用 调用方法 $(selector).pagination(option, callback); 回调和初始化 $(selec...
  • qq_30100043
  • qq_30100043
  • 2017-11-10 10:43:54
  • 970

无刷新分页 jquery.pagination.js

1.使用插件为 jquery.pagination.js ,如果没有这个js文件的话,我可以给发个。 首先引用 jquery.pagination.js (分页js),跟pagination.c...
  • quryktcs
  • quryktcs
  • 2017-05-08 10:38:48
  • 89

Jquery Pagination Ajax分页插件

1.引用js 和 css: jquery.pagination.js pagination.css 2.html and js: $("#Pagination").paginati...
  • zhulongxi
  • zhulongxi
  • 2016-06-02 17:25:06
  • 320

jquery Pagination.js 实现分页程序

因为项目需要,在表格显示的情况中需要使用分页功能,找了很多js的插件,最后找到Jquery.pagination.js,简单记录下使用方法,以备以后使用: 一、引入js文件,引入jquery.js...
  • wujindou
  • wujindou
  • 2014-02-14 15:53:20
  • 874

Jquery pagination 简单应用

今天因为一个习惯问题,导致浪费了一些时间,记录一下。在做Web开发的过程中,经常会用到分页,在我的php代码里面,页码是从1开始的,一直以来的写法是:$page = @intval($_GET['pa...
  • jom_ch
  • jom_ch
  • 2015-06-11 18:07:57
  • 661
    个人资料
    持之以恒
    等级:
    访问量: 71万+
    积分: 9660
    排名: 2333