JavaScript制作簡(jiǎn)單分頁(yè)插件
更新時(shí)間：2016年09月11日 17:10:46 作者：givebest
本文給大家分享的是JavaScript制作的一個(gè)兼容IE6+以及主流瀏覽器的分頁(yè)插件，非常的不錯(cuò)，有需要的小伙伴可以參考下
簡(jiǎn)介
兼容IE6+及現(xiàn)代瀏覽器的簡(jiǎn)單分頁(yè)，支持同一頁(yè)面多個(gè)分頁(yè)。
使用
Browser
<link rel="stylesheet" href="css/GB-paging.css"> <script src="js/GB-paging.js"></script>
普通分頁(yè)
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'
});
同頁(yè)面另一個(gè)分頁(yè)
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'
});
刷新帶參數(shù)
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}}'
});
輔助函數(shù)
function getPage(pname, other){
var page = window.location.search.replace( other + pname + '=', '') || 1;
return parseInt(page);
}
選項(xiàng)
eleId 分頁(yè)容器，僅支持ID，默認(rèn)為： 'gbpaging'
total: 總記錄數(shù)
paramName: 分頁(yè)參數(shù)名 || 'p'
curPage: 當(dāng)前頁(yè)碼
size: 每頁(yè)記錄數(shù) || 10
prevText: 上一頁(yè)文案 || '上一頁(yè)'，值為 false 不顯示
nextText: '下一頁(yè)文案 || '下一頁(yè)' 值為 false 不顯示
pageInfo: 分頁(yè)信息，{{currentPage}}當(dāng)前頁(yè)碼，{{totalPages}}總頁(yè)數(shù) || 當(dāng)前第{{currentPage}}頁(yè)/共{{totalPages}}頁(yè)，值為 false 不顯示
eventType: 事件方式，'click' || 'link'
goUrl： 鏈接URL，'?type=1&name=2&{{n}}' || ''，{{n}}為分頁(yè)參數(shù)名+值，如：'p=1'
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 默認(rèn)配置]
* @type {Object}
*/
defaultConfig = {
eventType: 'link',
curPage: 1, //當(dāng)前頁(yè)
size: 10, //每頁(yè)n條
paramName: 'p', //頁(yè)碼參數(shù)
prevText: '上一頁(yè)',
nextText: '下一頁(yè)',
pageInfo: '當(dāng)前第<b>{{currentPage}}</b>頁(yè)/共<b>{{totalPages}}</b>頁(yè)'
}
/**
* [$ 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;
}
/**
* [分頁(yè)html]
* @return {[type]} [description]
*/
GbPaging.prototype.build = function() {
var html = [];
// console.log('build', args)
// 沒(méi)有數(shù)據(jù)
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>');
}
// 是否顯示右側(cè)分頁(yè)信息
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;
});
}
}());
相關(guān)文章
編寫JS的過(guò)程中,我們經(jīng)常用到對(duì)象,也會(huì)用到對(duì)象中的屬性,下面這篇文章主要給大家介紹了關(guān)于JS判斷對(duì)象屬性是否存在的五種方案,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-01-01
這篇文章主要介紹了JS實(shí)現(xiàn)的對(duì)象去重功能,結(jié)合實(shí)例形式分析了javascript針對(duì)json對(duì)象的遍歷、判斷、運(yùn)算實(shí)現(xiàn)去重功能相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
在JavaScript編程中,過(guò)多的if...elseif...else語(yǔ)句可能導(dǎo)致代碼難以維護(hù),可以通過(guò)switch語(yǔ)句、對(duì)象字面量、函數(shù)映射、數(shù)組或映射對(duì)象分發(fā)、提前返回以及使用數(shù)組的find方法來(lái)優(yōu)化這種復(fù)雜的條件判斷,提高代碼的可讀性和維護(hù)性,下面就來(lái)介紹一下2024-09-09
這篇文章主要為大家詳細(xì)介紹了一個(gè)網(wǎng)易表單以及及時(shí)驗(yàn)證功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript顯示當(dāng)然日期和時(shí)間即年月日星期和時(shí)間
使用js顯示當(dāng)然日期和時(shí)間在網(wǎng)頁(yè)中很是常見(jiàn)，方法有很多，不過(guò)多說(shuō)大同小異，下面有個(gè)不錯(cuò)的示例，需要的朋友可以感受下2013-10-10
這篇文章主要介紹了詳解CocosCreator消息分發(fā)機(jī)制，詳細(xì)介紹了各模塊的設(shè)計(jì)，同學(xué)們一定要自己看下2021-04-04
判斷變量是否空值undefined, null, '', false, 0, [], {} 均返回true，否則返回false2008-10-10
這篇文章主要為大家詳細(xì)介紹了javaScript字符串工具類StringUtils，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-12-12
這篇文章主要介紹了JavaScript生成.xls文件的代碼,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-12-12
jQuery Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇jQuery Mobile動(dòng)態(tài)刷新頁(yè)面樣式的實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05