JavaScript轻巧分页,JavaScript制作简单分页插件

简介

简介

包容IE6+及今世浏览器的简易分页,帮衬同一页面多少个分页。

实用jQuery分页特效插件jquery.pagination.js,基于jQuery完毕,可依赖pageselectCallback函数callback调用通过ajax调用动态数据,近些日子的法子是生成JSON数据到JS文件,调用的数目是JSON格式数据,短处是数额是二次性读出来的,效能会差些,插件帮衬广大参数的自定义配置作用,还是很精确的,咱们可以依据自身的主见实行修正。

包容IE6+及当代浏览器的轻便分页,扶助同一页面八个分页。

使用

图片 1

使用

Browser

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

应用办法:

Browser

普通分页

1.加载插件和jQuery

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

HTML

<div id="gbpaging" class="gb-paging">
<link rel="stylesheet" href="pagination.css"> 
<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.pagination.js"></script> 

常常分页

JS

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

2.HTML内容

HTML

同页面另二个分页

复制代码 代码如下:

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

HTML

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

<div class=”pagination”></div>

JS

JS

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

3.函数调用

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

刷新带参数

<script type="text/javascript"> 
function pageselectCallback(page_index, jq){ 
        alert(page_index); 
        return false; 
      } 
$(document).ready(function(){ 
$(".pagination").pagination(100, { 
  callback: pageselectCallback, 

   num_edge_entries: 1, 

  }); 
}); 
</script> 

同页面另一个分页

HTML

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

参数配置解释

HTML

JS

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

参数名 参数表明 可选值 私下认可值

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

支援函数

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

callback 点击分页开关的回调函数 函数 function(){return false;}
current_page 初步化时相中的页码 数字 0
items_per_page 每页每页展现的记录条数 数字 10
link_to 分页链接 字符串 #
num_display_entries 最多呈现的页码数 数字 11
next_text ‘下一页’展现的文字 字符串 Next
next_show_always
若是设置为false‘下一页’开关独有在还是能扩展页码的气象下才显得 布尔值
true
prev_show_always
如若设置为false‘上一页’按键独有在还是能够导航到前一页的景况下才突显 布尔值
true
prev_text ‘上一页’呈现的文字 字符串 Previous
num_edge_entries 假设设为1,那么永世会彰显首页和末页 1或0 0
ellipse_text 从最近页码段到首页或末页之间的标志字符串 字符串 …
load_first_page 假使设置为true,那么回调函数就要插件开始化时就实施布尔值 true

JS

选项

  • eleId 分页容器,仅帮衬ID,暗中认可为: ‘gbpaging’
  • total: 总记录数
  • paramName: 分页参数名 || ‘p’
  • curPage: 当前页码
  • size: 每页记录数 || 10
  • prevText: 上一页文案 || ‘上一页’,值为 false 不展现
  • nextText: ‘下一页文案 || ‘下一页’ 值为 false 不显示
  • pageInfo: 分页音讯,{{currentPage}}当前页码,{{totalPages}}总页数
    || 当前第{{currentPage}}页/共{{totalPages}}页,值为 false
    不显示
  • eventType: 事件格局,’click’ || ‘link’
  • goUrl: 链接U库罗德L,’?type=1&name=2&{{n}}’ ||
    ”,{{n}}为分页参数名+值,如:’p=1′

查看DEMO  
插件下载

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

DEMO

以上所述就是本文的全体内容了,希望大家能够喜欢。

刷新带参数

Github

你只怕感兴趣的文章:

  • jquery
    pagination插件达成无刷新分页代码
  • jQuery EasyUI API 汉语文档 –
    Pagination分页
  • jquery.pagination +JSON
    动态无刷新分页达成代码
  • jquery.pagination.js
    无刷新分页达成步骤分享
  • asp.net
    jquery无刷新分页插件(jquery.pagination.js)
  • jQuery Pagination
    Ajax分页插件(分页切换时无刷新与延迟)汉语翻译版
  • jQuery插件分享之分页插件jqPagination
  • Jquery 分页插件之Jquery
    Pagination
  • jquery插件pagination完毕无刷新ajax分页
  • jQuery EasyUI
    Pagination达成分页的常用方法

HTML

全体代码

/**
    * 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="'+%20urlParam%20+%20args.curPage%20+'" class="gb-paging-current">' + args.curPage + '</a>');

        for (var i = 1; i < ii; i++) {
          if (args.curPage - i > 1) {
            html.unshift('<a href="'+%20urlParam%20+%20(args.curPage%20-%20i)%20+'">' + (args.curPage - i) + '</a>');
          }

          if (args.curPage + i < args.pages) {
            html.push('<a href="'+%20urlParam%20+%20(args.curPage%20+%20i)%20+'">' + (args.curPage + i) + '</a>');
          }
        }

        if (args.curPage - 2 > 1) {
          html.unshift('...');
        }

        if (args.curPage > 1) {
          html.unshift('<a href="'+%20urlParam%20+'1">1</a>');
          args.isPrev && html.unshift('<a href="'+%20urlParam%20+%20(args.curPage%20-%201)%20+'">' + args.prevText + '</a>');
        } else {
          args.isPrev && html.unshift('<a class="disabled">' + args.prevText + '</a>');
        }

        if (args.curPage + 2 < args.pages) {
          html.push('...');
        }

        if (args.curPage < args.pages) {
          html.push('<a href="'+%20urlParam%20+%20args.pages%20+'">' + args.pages + '</a>');
          args.isNext && html.push('<a href="'+%20urlParam%20+%20(args.curPage%20+%201)%20+'">' + 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;
          });
        }

    }());

转载请申明:

<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: 链接U大切诺基L,’?type=1&name=2&{{n}}’ ||
”,{{n}}为分页参数名+值,如:’p=1′

Github

总体代码

/**
  * 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="'+%20urlParam%20+%20args.curPage%20+'" class="gb-paging-current">' + args.curPage + '</a>');

    for (var i = 1; i < ii; i++) {
     if (args.curPage - i > 1) {
      html.unshift('<a href="'+%20urlParam%20+%20(args.curPage%20-%20i)%20+'">' + (args.curPage - i) + '</a>');
     }

     if (args.curPage + i < args.pages) {
      html.push('<a href="'+%20urlParam%20+%20(args.curPage%20+%20i)%20+'">' + (args.curPage + i) + '</a>');
     }
    }

    if (args.curPage - 2 > 1) {
     html.unshift('...');
    }

    if (args.curPage > 1) {
     html.unshift('<a href="'+%20urlParam%20+'1">1</a>');
     args.isPrev && html.unshift('<a href="'+%20urlParam%20+%20(args.curPage%20-%201)%20+'">' + args.prevText + '</a>');
    } else {
     args.isPrev && html.unshift('<a class="disabled">' + args.prevText + '</a>');
    }

    if (args.curPage + 2 < args.pages) {
     html.push('...');
    }

    if (args.curPage < args.pages) {
     html.push('<a href="'+%20urlParam%20+%20args.pages%20+'">' + args.pages + '</a>');
     args.isNext && html.push('<a href="'+%20urlParam%20+%20(args.curPage%20+%201)%20+'">' + 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;
     });
    }

  }());

你可能感兴趣的稿子:

  • 极其科学的贰个JS分页效果代码,值得研商
  • js分页突显div的剧情
  • 纯js分页代码(简洁实用)
  • 选择js制作html
    table分页示例(js落成分页)
  • 三个实用的JSP分页代码
  • js表格分页达成代码
  • JS+Ajax+Jquery完成页面无刷新分页以及分组
    超强的贯彻
  • 依据jQuery的js分页代码

相关文章

Post Author: admin

发表评论

电子邮件地址不会被公开。 必填项已用*标注