JavaScript makes simple paging plug-ins _javascript tips

Brief introduction

Compatible with ie6+ and modern browser simple pagination, support the same page multiple pagination.

Use

Browser

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

Normal page pagination

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 '
});

Another paging with the page

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 '
};

Refresh with parameters

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} '}
);

Auxiliary functions

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

Options

Eleid paging container, only supports ID, default is: ' Gbpaging '
Total: Number of records
ParamName: Pagination Parameter name | | ' P '
Curpage: Current page number
Size: Number of records per page | | 10
Prevtext: prev Copy | | ' Previous ', the value is false does not show
Nexttext: ' next page Copy | | ' Next ' value is false does not appear
PageInfo: Paging information, {{currentpage}}} current page number, {{totalpages}}} Total pages | | The current {{currentpage}} Page/Total {{totalpages}} page, the value false does not display
EventType: Event mode, ' click ' | | ' Link '
Gourl: Link URL, ' type=1&name=2&{{n} ' | | ', {{n}} ' is a paging parameter name + value, such as: ' P=1 '

Github

Https://github.com/givebest/GB-paging

Complete code

/** * 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 default configuration] * @type {Object} * * Defaultconfig = {eventtype: ' link ', curpage:1, Current page size:10,//per page n paramname: ' P ',///number parameter prevtext: ' prev ', Nexttext: ' next page ' , PageInfo: ' Current <b>{{currentPage}}</b> page/Total <b>{{totalPages}}</b> page '}/** * [$ descr Iption] * @param {String} ID * @return {Object} HTML [HTML element] */$ = function (ID) {retur
    n document.getElementById (ID); The function gbpaging () {if (!
    This is instanceof gbpaging) return to 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; }/** * [Paging htmL] * @return {[type]} [description]/GbPaging.prototype.build = function () {var html = [];
     Console.log (' Build ', args)//No data 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> '); //Whether to display the right paging information 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 (");
      }/** * [Binding Event] * @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.getattrib
      Ute (' 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 ();
    }
    });
 }

    /**    * [Interpret URL] * @param {[string]} URL [description] * @param {[string]} param [description] * @return {[St RING]} [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 To detach * @param {function} fn Callback function/function bind (Ele, event, FN) {if (typeof add
      EventListener = = ' 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 Eve NT to Detach * @param {function} fn Callback function */* function unbind (ele, event, fn) {if type of 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 * @retu
      RN {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 [CLASSN AME]/* 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 = = ' Fu
     Nction ' && define.amd) {define (' gb-paging ', [], function () {return gbpaging;
    });
 }

  }());