jquery的分页插件pagination的使用
2017-11-10 10:43
976 查看
引入
在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”为当前页 |
方法 | 参数 | 说明 |
---|---|---|
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); }); }; }));
相关文章推荐
- 浅谈jQuery Pagination Ajax 分页插件的使用
- jquery pagination分页插件使用详解(后台struts2)
- jquery.pagination.js分页插件的使用
- 基于bootstarp的分页插件jquery.twbsPaginationwbst的使用
- Jquery前端分页插件pagination使用
- jquery分页插件jquery.pagination.js使用方法解析
- 将jQuery Pagination分页插件用于不使用AJAX加载数据的页面
- jQuery分页插件jquery.pagination.js使用
- jQuery Pagination分页插件使用方法详解
- 使用Jquery分页插件jquery.pagination.js 实现无刷新分页效果
- 使用Jquery.pagination插件实现分页
- jquery分页插件pagination使用教程
- jQuery Pagination分页插件的使用
- 分页插件jquery.pagination.js
- jquery.pagination.js分页插件的运用
- 使用jquery.pagination +JSON 【实现】动态无刷新分页
- jquery.pagination.js分页插件的运用
- 分页插件jquery.pagination.js
- jQuery插件pagination参数使用说明
- jQuery 分页插件 pagination