资讯专栏INFORMATION COLUMN

JavaScript简单分页,兼容IE6,~3KB

Salamander / 1437人阅读

简介

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

使用 Browser


普通分页 HTML
JS
gbPaging({
    total: 101,
    paramName: "p",
    curPage: getPage("p", "#"),
    size: 5,
    prevText: "<",
    nextText: ">",
    pageInfo: "{{currentPage}}/{{totalPages}}",
    eventType: "click"
});
同页面另一个分页 HTML
JS
gbPaging({
    eleId: "paging1",
    total: 54,
    size: 10,
    prevText: false,
    nextText: false,
    paramName: "p1",
    curPage: getPage("p1", "#"),
    pageInfo: false,
    eventType: "click"
});
刷新带参数 HTML
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: "当前第{{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...

    LiangJ 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    codercao 评论0 收藏0
  • 前端技术 博客文章、书籍 积累

    摘要:好多编辑器例如等都支持这样的语法来快速的编写代码如何优雅地使用把标签放在结束标签之后结束标签之前的差别什么是响应式设计怎样进行 书籍 《JavaScriptDOM编程艺术》《JavaScript高级程序设计》《JavaScript框架设计》《JavaScript专家编程》《JavaScript Ninjia》《JavaScript语言精粹(修订版)》《JavaScript设计模式》《J...

    huayeluoliuhen 评论0 收藏0
  • 推荐轻量高效无依赖的开源JS插件和库

    摘要:弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作,适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖,并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

    AlphaWallet 评论0 收藏0
  • 推荐轻量高效无依赖的开源JS插件和库

    摘要:弹出层是一个轻量级的库用于管理工具提示和弹窗效果。一个带有的跨浏览器富文本编辑器。由制作,适用于每天写作的富文本编辑器。轻量的操作库。是一个快速简单轻量级的浏览器功能检测库。它没有任何的依赖,并且压缩后仅有。极小跨平台的全屏插件。 在这里维持一个持续更新的地方 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果脚本。demo Lightgallery.js -...

    lushan 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<