简介
兼容IE6+及现代浏览器的简单分页,支持同一页面多个分页。
使用 Browser普通分页 HTML
JSgbPaging({ total: 101, paramName: "p", curPage: getPage("p", "#"), size: 5, prevText: "<", nextText: ">", pageInfo: "{{currentPage}}/{{totalPages}}", eventType: "click" });同页面另一个分页 HTMLJSgbPaging({ eleId: "paging1", total: 54, size: 10, prevText: false, nextText: false, paramName: "p1", curPage: getPage("p1", "#"), pageInfo: false, eventType: "click" });刷新带参数 HTMLJSgbPaging({ 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"
DEMOhttp://blog.givebest.cn/GB-paging.html
Githubhttps://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: "当前第{{currentPage}}页/共{{totalPages}}页" } /** * [$ 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("" + args.curPage + ""); for (var i = 1; i < ii; i++) { if (args.curPage - i > 1) { html.unshift("" + (args.curPage - i) + ""); } if (args.curPage + i < args.pages) { html.push("" + (args.curPage + i) + ""); } } if (args.curPage - 2 > 1) { html.unshift("..."); } if (args.curPage > 1) { html.unshift("1"); args.isPrev && html.unshift("" + args.prevText + ""); } else { args.isPrev && html.unshift("" + args.prevText + ""); } if (args.curPage + 2 < args.pages) { html.push("..."); } if (args.curPage < args.pages) { html.push("" + args.pages + ""); args.isNext && html.push("" + args.nextText + ""); } else { args.isNext && html.push("" + args.nextText + ""); } // 是否显示右侧分页信息 if (args.isPageInfo) html.push("" + args.pageInfo.replace("{{currentPage}}", args.curPage).replace("{{totalPages}}", args.pages) + ""); 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("(^|)" + className.split(" ").join("|") + "(|$)", "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; }); } }());转载请注明:https://segmentfault.com/a/1190000006878074
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90972.html
摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...
摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...
摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...
摘要:弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作,适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖,并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...
摘要:弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作,适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖,并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...
阅读 2832·2023-04-26 02:23
阅读 1572·2021-11-11 16:55
阅读 3150·2021-10-19 11:47
阅读 3353·2021-09-22 15:15
阅读 1976·2019-08-30 15:55
阅读 1034·2019-08-29 15:43
阅读 1292·2019-08-29 13:16
阅读 2189·2019-08-29 12:38