JavaScript簡(jiǎn)單分頁(yè)，兼容IE6，~3KB

Salamander 發(fā)布于2019-08-22 10:38 / 1442人閱讀

簡(jiǎn)介

兼容IE6+及現(xiàn)代瀏覽器的簡(jiǎn)單分頁(yè)，支持同一頁(yè)面多個(gè)分頁(yè)。

使用 Browser

普通分頁(yè) HTML

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

同頁(yè)面另一個(gè)分頁(yè) HTML

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

刷新帶參數(shù) HTML

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"

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 [email protected]
    * @(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)前第{{currentPage}}頁(yè)/共{{totalPages}}頁(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("" + 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 + "");
        }

        // 是否顯示右側(cè)分頁(yè)信息
        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;
          });
        }

    }());

轉(zhuǎn)載請(qǐng)注明：https://segmentfault.com/a/1190000006878074

GPU云服務(wù)器云服務(wù)器 IE6兼容兼容IE6 ie6兼容性解決ie6不兼容

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/90972.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Salamander

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow安裝pandas

閱讀 2846·2023-04-26 02:23
程序員自制游戲：超級(jí)瑪麗100%真實(shí)版，能把你玩哭了~【附源碼】

閱讀 1594·2021-11-11 16:55
美國(guó)政府：今年發(fā)生了三起針對(duì)水處理廠的勒索軟件攻擊

閱讀 3156·2021-10-19 11:47
主機(jī)邦定域名什么意思-綁定域名是什么意思？

閱讀 3370·2021-09-22 15:15
前端基礎(chǔ)入門(mén)三（CSS總結(jié)篇——思維導(dǎo)圖）

閱讀 1984·2019-08-30 15:55
寫(xiě)給 Android 開(kāi)發(fā)的小程序布局指南，F(xiàn)lex 布局！

閱讀 1045·2019-08-29 15:43
前端開(kāi)發(fā)者指南（2017）

閱讀 1300·2019-08-29 13:16
HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

閱讀 2203·2019-08-29 12:38

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript簡(jiǎn)單分頁(yè)，兼容IE6，~3KB

相關(guān)文章

前端技術(shù) 博客文章、書(shū)籍積累

前端技術(shù) 博客文章、書(shū)籍積累

前端技術(shù) 博客文章、書(shū)籍積累

推薦輕量高效無(wú)依賴(lài)的開(kāi)源JS插件和庫(kù)

推薦輕量高效無(wú)依賴(lài)的開(kāi)源JS插件和庫(kù)

發(fā)表評(píng)論

0條評(píng)論

Salamander

男|高級(jí)講師

TA的文章

tensorflow安裝pandas

程序員自制游戲：超級(jí)瑪麗100%真實(shí)版，能把你玩哭了~【附源碼】

美國(guó)政府：今年發(fā)生了三起針對(duì)水處理廠的勒索軟件攻擊

主機(jī)邦定域名什么意思-綁定域名是什么意思？

前端基礎(chǔ)入門(mén)三（CSS總結(jié)篇——思維導(dǎo)圖）

寫(xiě)給 Android 開(kāi)發(fā)的小程序布局指南，F(xiàn)lex 布局！

前端開(kāi)發(fā)者指南（2017）

HTML+CSS復(fù)習(xí)之CSS基礎(chǔ)篇

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript簡(jiǎn)單分頁(yè)，兼容IE6，~3KB

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript簡(jiǎn)單分頁(yè)，兼容IE6，~3KB