简介

兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。

使用

Browser

<link rel="stylesheet" href="css/GB-paging.css">
<script src="js/GB-paging.js"></script>

普通分页

HTML

<div id="gbpaging" class="gb-paging">

JS

gbPaging({
total: 101,
paramName: 'p',
curPage: getPage('p', '#'),
size: 5,
prevText: '<',
nextText: '>',
pageInfo: '<b>{{currentPage}}</b>/<b>{{totalPages}}</b>',
eventType: 'click'
});

同页面另一个分页

HTML

<div id="paging1" class="gb-paging"></div>

JS

gbPaging({
eleId: 'paging1',
total: 54,
size: 10,
prevText: false,
nextText: false,
paramName: 'p1',
curPage: getPage('p1', '#'),
pageInfo: false,
eventType: 'click'
});

刷新带参数

HTML

<div id="paging2"  class="gb-paging"></div>

JS

gbPaging({
eleId: 'paging2',
total: 2500,
paramName: 'page',
curPage: getPage('page', '?type=1&name=2&'),
goUrl: '?type=1&name=2&{{n}}'
});

辅助函数

function getPage(pname, other){
var page = window.location.search.replace( other + pname + '=', '') || 1;
return parseInt(page);
}

选项

  • eleId 分页容器,仅支持ID,默认为: 'gbpaging'
  • total: 总记录数
  • paramName: 分页参数名 || 'p'
  • curPage: 当前页码
  • size: 每页记录数 || 10
  • prevText: 上一页文案 || '上一页',值为 false 不显示
  • nextText: '下一页文案 || '下一页' 值为 false 不显示
  • pageInfo: 分页信息,{{currentPage}}当前页码,{{totalPages}}总页数 || 当前第{{currentPage}}页/共{{totalPages}}页,值为 false 不显示
  • eventType: 事件方式,'click' || 'link'
  • goUrl: 链接URL,'?type=1&name=2&{{n}}' || '',{{n}}为分页参数名+值,如:'p=1'

DEMO

http://blog.givebest.cn/GB-paging.html

Github

https://github.com/givebest/GB-paging

完整代码

/**
* GB-paging.js
* @class gbPaging
* @see https://github.com/givebest/GB-paging
* @author givenlovs@msn.com
* @(c) 2016
**/ (function() { var $,
defaultConfig,
paging = null,
args; /**
* [defaultConfig 默认配置]
* @type {Object}
*/
defaultConfig = {
eventType: 'link',
curPage: 1, //当前页
size: 10, //每页n条
paramName: 'p', //页码参数
prevText: '上一页',
nextText: '下一页',
pageInfo: '当前第<b>{{currentPage}}</b>页/共<b>{{totalPages}}</b>页'
} /**
* [$ description]
* @param {String} id
* @return {Object} HTML [HTML element]
*/
$ = function(id) {
return document.getElementById(id);
} function GbPaging() {
if (!(this instanceof GbPaging)) return new GbPaging();
} GbPaging.prototype.init = function(opts) {
this.getParams(opts);
this.build();
this.events();
} GbPaging.prototype.getParams = function(opts) {
args = this.opts = opts || {};
// _this = this; if ($(args.eleId)) {
args.container = $(args.eleId);
} else if ($('gbpaging')) {
args.container = $('gbpaging');
} else {
return;
} args.eventType = args.eventType || defaultConfig.eventType;
args.total = args.total || 0;
args.curPage = args.curPage || defaultConfig.curPage;
args.size = args.size || defaultConfig.size;
args.paramName = args.paramName || defaultConfig.paramName;
args.goUrl = args.goUrl || '';
args.pages = Math.ceil(args.total / args.size || 0);
args.isPrev = (args.prevText !== false) ? true : false;
args.prevText = args.prevText || defaultConfig.prevText;
args.isNext = (args.nextText !== false) ? true : false;
args.nextText = args.nextText || defaultConfig.nextText;
args.isPageInfo = (args.pageInfo !== false) ? true : false;
args.pageInfo = args.pageInfo || defaultConfig.pageInfo;
} /**
* [分页html]
* @return {[type]} [description]
*/
GbPaging.prototype.build = function() {
var html = [];
// console.log('build', args) // 没有数据
if (args.pages <= 1) {
addClass(args.container, 'gb-hide');
return;
} if (args.curPage >>> 0 <= 0) return; var ii = (args.curPage == 1 || args.curPage == args.pages) ? 3 : 2;
var urlParam = parseUrl(args.goUrl, args.paramName); html.push('<a href="'+ urlParam + args.curPage +'" class="gb-paging-current">' + args.curPage + '</a>'); for (var i = 1; i < ii; i++) {
if (args.curPage - i > 1) {
html.unshift('<a href="'+ urlParam + (args.curPage - i) +'">' + (args.curPage - i) + '</a>');
} if (args.curPage + i < args.pages) {
html.push('<a href="'+ urlParam + (args.curPage + i) +'">' + (args.curPage + i) + '</a>');
}
} if (args.curPage - 2 > 1) {
html.unshift('<span class="gb-paging-ellipsis">...</span>');
} if (args.curPage > 1) {
html.unshift('<a href="'+ urlParam +'1">1</a>');
args.isPrev && html.unshift('<a href="'+ urlParam + (args.curPage - 1) +'">' + args.prevText + '</a>');
} else {
args.isPrev && html.unshift('<a class="disabled">' + args.prevText + '</a>');
} if (args.curPage + 2 < args.pages) {
html.push('<span class="gb-paging-ellipsis">...</span>');
} if (args.curPage < args.pages) {
html.push('<a href="'+ urlParam + args.pages +'">' + args.pages + '</a>');
args.isNext && html.push('<a href="'+ urlParam + (args.curPage + 1) +'">' + args.nextText + '</a>');
} else {
args.isNext && html.push('<a class="disabled">' + args.nextText + '</a>');
} // 是否显示右侧分页信息
if (args.isPageInfo) html.push('<div class="gb-paging-info">' + args.pageInfo.replace('{{currentPage}}', args.curPage).replace('{{totalPages}}', args.pages) + '</div>'); args.container.innerHTML = html.join('');
} /**
* [绑定事件]
* @return {[type]} [description]
*/
GbPaging.prototype.events = function() {
var _this = this; if (args.eventType !== 'click') return;
bind(args.container, 'click', function(e) {
e = e || window.event;
e.preventDefault ? e.preventDefault() : e.returnValue = false;
args = _this.opts; // console.log('events', _this.opts); var target = e.target || e.srcElement;
if (target.tagName.toLowerCase() === 'a' && !hasClass(target, 'disabled')) {
args.curPage = target.getAttribute('href').replace(parseUrl(args.goUrl, args.paramName), '');
if (args.curPage >>> 0 === 0) args.curPage = args.curPage.replace(window.location.href, '');
args.curPage = parseInt(args.curPage); _this.build();
}
});
} /**
* [解释URL]
* @param {[String]} url [description]
* @param {[String]} param [description]
* @return {[String]} [description]
*/
function parseUrl(url, param) {
if (url) {
return url.replace('{{n}}', param + '=');
} else {
return '#' + param + '=';
}
} /**
* Bind events to elements
* @param {Object} ele HTML Object
* @param {Event} event Event to detach
* @param {Function} fn Callback function
*/
function bind(ele, event, fn) {
if (typeof addEventListener === 'function') {
ele.addEventListener(event, fn, false);
} else if (ele.attachEvent) {
ele.attachEvent('on' + event, fn);
}
} /**
* Unbind events to elements
* @param {Object} ele HTML Object
* @param {Event} event Event to detach
* @param {Function} fn Callback function
*/
/* function unbind(ele, event, fn) {
if (typeof removeEventListener === 'function') {
ele.removeEventListener(event, fn, false);
} else if (ele.detachEvent) {
ele.detach('on' + event, fn);
}
}*/ /**
* hasClass
* @param {Object} ele HTML Object
* @param {String} cls className
* @return {Boolean}
*/
function hasClass(ele, cls) {
if (!ele || !cls) return false;
if (ele.classList) {
return ele.classList.contains(cls);
} else {
return ele.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
} /**
* [addClass description]
* @param {Object} ele [HTML Object]
* @param {String} cls [className]
*/
function addClass(ele, cls) {
if (ele.classList) {
ele.classList.add(cls);
} else {
if (!hasClass(ele, cls)) ele.className += '' + cls;
}
} /**
* [removeClass description]
* @param {Object} ele [HTML Object]
* @param {String} cls [className]
*/
/* function removeClass(ele, cls) {
if (ele.classList) {
ele.classList.remove(cls);
} else {
ele.className = ele.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
}
}*/ if (window.gbPaging === undefined) {
window.gbPaging = function (opts) {
paging = GbPaging();
return paging.init(opts);
}
} // AMD (@see https://github.com/jashkenas/underscore/blob/master/underscore.js)
if (typeof define == 'function' && define.amd) {
define('GB-paging', [], function() {
return gbPaging;
});
} }());

转载请注明:http://www.cnblogs.com/givebest/p/5861930.html

JavaScript简单分页,兼容IE6,~3KB的更多相关文章

  1. 表单美化-原生javascript和jQuery多选按钮(兼容IE6)

    前些天我们讲了下单选按钮的美化今天来做表单元素多选按钮的美化.我们的想法是:利用多选按钮是否被选中和是否不给选择的特性来为按钮的父元素添加对应的样式,就是说用什么的样式是由按钮的状态来决定. 用到的图 ...

  2. PNG兼容IE6解决方法

    虽然说现在早就不用ie6浏览器了,可以还是有一小部分还在使用 ,刚好公司也有要求~~~ <p> E6不兼容png图片,确实让网页的图片质量大大下降,为了兼容万恶的IE6,总结了下面几种方法 ...

  3. div+css 布局下兼容IE6 IE7 FF常见问题

    div+css 布局下兼容IE6 IE7 FF常见问题 收藏 所有浏览器 通用 (市面上主要用到的IE6 IE7 FF)height: 100px; IE6 专用 _height: 100px; IE ...

  4. jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6

    http://www.cnblogs.com/lhj588/archive/2013/04/02/2994639.html —————————————————————————————————————— ...

  5. 兼容IE6\7\8浏览器的html5标签的几个方案

    html5大行其道的时代已经到来.如果你还在等待浏览器兼容,说明你已经与web脱节几条街了.当然,这得益于移动客户端的蓬勃发展.如果还在纠结于,是否应该掌握html5和css3技术时,请狠狠的抽自己几 ...

  6. html5 图片上传,支持图片预览、压缩、及进度显示,兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

  7. html5标签兼容ie6,7,8

    注册博客园已经三年了,这三年一直在忙,没时间写博文.也许是忙,也许是懒吧!当然这三年发生了很多事,我也从开发人员转变为前端人员. 是时候对所学的,所用的知识做一下沉淀了.就从这一篇开始吧! html5 ...

  8. 使用Vs2005打造简单分页浏览器(1)原创

    原文:使用Vs2005打造简单分页浏览器(1)原创 使用Vs2005打造简单分页浏览器(1)原创1引言2功能3实现过程以及关键点4总结5不足之处6其他7 代码下载 1    引言很早就有搞一个浏览器的 ...

  9. 原生JS编写兼容IE6,7,8浏览器无缝自动轮播(带按钮切换)

    项目要求页面兼容IE6,7,8等浏览器,我们可能会遇到这个轮播效果,轮播板块要求:无限循环.自动轮播和手动切换功能,每一次滚动一小格,网上有很多这类插件,例如:swiper等! 但是很多都是不兼容IE ...

随机推荐

  1. Ajax.BeginForm方法 参数

    感谢博主 http://www.cnblogs.com/zzgblog/p/5454019.html toyoung 在Asp.Net的MVC中的语法,在Razor页面中使用,替代JQuery的Aja ...

  2. 一步步开发自己的博客 .NET版(1、基本显示)

    前言 我们每个猿都有一个搭建自己独立博客的梦,我也不例外.以前想 现在想 以后也想.之所以一直迟迟没有着手,是因为难以跨出第一步.每次心里想着,等我以后技术好了再说,然后就没有然后了.以前用过word ...

  3. MySql 死锁时的一种解决办法

    转自:http://blog.csdn.net/mchdba/article/details/38313881 之前也遇到一次,今天又遇到了这个问题,所以这次必须解决,网上找到这篇文章帮了大忙,方便以 ...

  4. Web前端温故知新-CSS基础

    一.CSS定义与编写CSS 1.1 CSS的定义 全名:Cascading Style Sheets -> 层叠样式表 定义:CSS成为层叠样式表,它主要用于设置HTML页面中的文本内容(字体. ...

  5. ASP.NET MVC 5 Web编程4 -- Razor视图引擎

    Razor简介 Razor是ASP.NET新增的一个视图引擎,由微软全球最年轻的副总裁,有着"ASP.NET之父"称呼的Scott Guthrie主导的团队开发. 主导Razor开 ...

  6. 基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#)

    基于虎书实现LALR(1)分析并生成GLSL编译器前端代码(C#) 为了完美解析GLSL源码,获取其中的信息(都有哪些in/out/uniform等),我决定做个GLSL编译器的前端(以后简称编译器或 ...

  7. Vue插件开发入门

    相对组件来说,Vue 的插件开发受到的关注要少一点.但是插件的功能是十分强大的,能够完成许多 Vue 框架本身不具备的功能. 大家一般习惯直接调用现成的插件,比如官方推荐的 vue-router.vu ...

  8. 【Win 10应用开发】使用RichEditBox控件应注意的问题

    RichEditBox控件支持对多格式文本进行编辑,一般的文本输入控件可以使用TextBox,不过,如果希望编辑格式较为复杂的文本,就可以考虚使用RichEditBox控件. RichEditBox控 ...

  9. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

  10. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...