jquery's pager pager implementation code _jquery

This example for you to share the jquery pager page of the specific implementation code, for your reference, the specific contents are as follows

Effect Chart:

Code:

HTML code:

<! DOCTYPE html>
 
 

CSS code:

. pager-box:after{
 Display:block;
 height:0;
 Visibility:hidden;
 Clear:both;
 Content: ';
}
. pager{
 Float:left;
 position:relative;
 left:50%;
 Font-family: Microsoft James Black;
Pager A,.pager span{
 position:relative;
 left:-50%;
 Display:block;
 Float:left;
 margin-left:5px;
 border:1px solid #b6bcc1;
 padding:5px 10px;
 Text-decoration:none;
 Color: #b6bcc1;
 Border-radius:3px
}
. Pager span{
 border:0;
Pager a.js-selected{
 background: #b6bcc1;
 Color: #fff;
 Cursor:default
}
. Pager a.js-disabled{
 background: #f1f1f1;
 Border-color: #f1f1f1;
 Cursor:default;
 Color: #fff;
}

Pager.js Code

(Function (window, undefined) {/** * Creates an element node and returns the */function Create (TagName, ClassName, parent) {var element = Documen
 T.createelement (TagName);
 Element.classname = ClassName;
 Parent.appendchild (Element);
 return element;
 /** * Array eliminates duplicate */function Clearrepeat (arr) {var obj = {}, result = [];
 for (var i = 0, len = arr.length i < len; i++) {obj[arr[i]] = 1;
 for (var i in obj) {result.push (i);
 return result;
 /** * Add class name */function Addclassname (element, className) {var aclass = Element.className.split (');
 Aclass.push (ClassName);
 AClass = Clearrepeat (AClass);
 Element.classname = Aclass.join ("); /** * Delete class name */function Delclassname (element, className) {var aclass = Element.className.split ("), index = Aclas
 S.indexof (ClassName);
 if (Index > 0) aclass.splice (index, 1);
 Element.classname = Aclass.join ("); /** * Check to see if the class name * @param element * @param className * @returns {Boolean}/function Hasclassname (element, CLASSN
 AME) {var aclass = Element.className.split ('), index = Aclass.indexof (className);
 if (Index > 0) return true;
 return false;
 var Pager = function (obj) {this.__total = Obj.total | | 1; This.__index = Obj.index | |
 1;
 This.__parent = obj.parent;
 This.__onchange = Obj.onchange;

 Initialize the pager this.__init (obj);

 };
 var pro = Pager.prototype;
 /** * Initialize the pager/pro.__init = function (obj) {if (This.__total < this.__index) return;
 Storage number this.__numbers = [];
 Store ellipsis this.__dots = [];
 This.__wrapper = Create (' div ', ' pager-box ', this.__parent);
 This.__body = Create (' div ', ' pager ', this.__wrapper);
 Store on page this.__prebtn = Create (' A ', ' prev ', this.__body);
 This.__prebtn.href = ' javascript:void (0); '; This.__prebtn.innertext = (Obj.label && obj.label.prev) | |
 ' on a page '; 
  Storage number if (This.__total < 8) {for (var i = 0; i < this.__total; i++) {var t = Create (' A ', ' number ', this.__body);
  T.href = ' javascript:void (0); ';
  T.innertext = i + 1; This.__numbers.push (t);
  }else{for (var i = 0; i < 2; i++) {var t = Create (' span ', ' dots ', this.__body);
  T.innertext = ' ... ';
  This.__dots.push (t);
  };
  for (var i = 0; i < 7; i++) {var t = Create (' A ', ' number ', this.__body);
  T.href = ' javascript:void (0); ';
  This.__numbers.push (t);
 }//Save next page this.__nextbtn = Create (' A ', ' next ', this.__body);
 This.__nextbtn.href = ' javascript:void (0); '; This.__nextbtn.innertext = (Obj.label && obj.label.next) | |
 ' Next page ';
 This._$setindex (This.__index);
 This.__body.onclick = This.__doclick.bind (this);

 };
 Pro.__doclick = function (e) {var e = e | | window.event, target = E.target | | e.srcelement;
 Click the ellipsis if (target.tagName.toLowerCase () = = ' span ') return;
 Click on the previous page that cannot be clicked or the next page if (Hasclassname (target, ' js-disabled ')) return;

 Click on the current page if (Hasclassname (target, ' js-selected ')) return;
 if (target = = this.__prebtn) {//Click on the previous page this._$setindex (this.__index-1); }else if (target = = this.__nextbtn) {//Click Next page this._$setindex (thIs.__index + 1);
  }else{//clicked the number var index = Target.innertext;
 This._$setindex (index);

 }

 };
 /** * Jump Page * * * Pro._$setindex = function (index) {index = parseint (index);
  Update information if (index!= this.__index) {this.__last = This.__index;
 This.__index = index;
 }//Processing delclassname (this.__prebtn, ' js-disabled ');
 Delclassname (this.__nextbtn, ' js-disabled ');
  if (This.__total < 8) {//The total number of pages less than 8 if (this.__last) Delclassname (this.__numbers[this.__last-1], ' js-selected ');
  Addclassname (this.__numbers[this.__index-1], ' js-selected ');
  if (This.__index = = 1) addclassname (this.__prebtn, ' js-disabled ');

 if (This.__index = = this.__total) addclassname (this.__nextbtn, ' js-disabled ');
  }else{this.__dots[0].style.display = ' none ';
  This.__dots[1].style.display = ' None ';
  for (var i = 0; i < 7; i++) {Delclassname (this.__numbers[i], ' js-selected ');
  };
  if (This.__index < 5) {for (var i = 0; i < 6; i++) {this.__numbers[i].innertext = i + 1; } this.__numbErs[6].innertext = This.__total;
  This.__dots[1].style.display = ' block ';
  This.__body.insertbefore (This.__dots[1], this.__numbers[6]);
  Addclassname (this.__numbers[this.__index-1], ' js-selected ');
  if (This.__index = = 1) addclassname (this.__prebtn, ' js-disabled '); }else if (This.__index > This.__total-4) {for (var i = 1; i < 7; i++) {This.__numbers[i].innertext = This.__tot
  Al + i-6;
  } this.__numbers[0].innertext = ' 1 ';
  This.__dots[0].style.display = ' block ';
  This.__body.insertbefore (This.__dots[0], this.__numbers[1]);
  Addclassname (This.__numbers[this.__index + 6-this.__total], ' js-selected ');
  if (This.__index = = this.__total) addclassname (this.__nextbtn, ' js-disabled ');
  }else{this.__numbers[0].innertext = ' 1 ';
   for (var i = 1; i < 6; i++) {This.__numbers[i].innertext = this.__index-3 + i;
  if (i = = 3) addclassname (This.__numbers[i], ' js-selected ');
  } this.__numbers[6].innertext = This.__total;
This.__dots[0].style.display = ' block ';  This.__body.insertbefore (This.__dots[0], this.__numbers[1]);
  This.__dots[1].style.display = ' block ';
  This.__body.insertbefore (This.__dots[1], this.__numbers[6]); } if (typeof This.__onchange = = ' function ') {This.__onchange ({index:this.__index, Last:this.__last, total:
 This.__total})};
 /** * Get the total number of pages */Pro._$getindex = function () {return this.__index;
 };
 /** * Get last page/pro._$getlast = function () {return this.__last;
 }; becomes the global window.

Pager = Pager;

 }) (window);

Main ideas:

The paging device is divided into the following 4 types of situations:

Situation 1, when total < 8 o'clock, all the page numbers are displayed.

situation 2, when total >= 8 and Index < 5 o'clock, displays 1-6 and the last page.

Situation 3, when total >= 8 and index > Total-4, the 1 and last 6 items are displayed.

situation 4, when total >= 8 and 5 <= index <= total-4, display 1 and the last page, and the middle 5 items.

Pager a Setting object when the class is instantiated:

{parent:element,//Set parent node Index:index for Pager,//
 Set Current page
 total:total,//Set total number of pages
 onchange:function () {} Page change callback function
}

When we instantiate the pager, execute the statement in the body of the pager function, assign the value first, and then execute the initialization function:

var Pager = function (obj) {
 //assignment
 this.__total = obj.total | | 1;
 This.__index = Obj.index | | 1;
 This.__parent = obj.parent;
 This.__onchange = Obj.onchange;
 Initializes the pager
 this.__init (obj);

Initialize function This.__init structure:

Pager.prototype.__init = function (obj) {

 (processed according to the analysis above) ...
 This._$setindex (This.__index); Jump to initial page
 //Binding pager Click function
 This.__body.onclick = This.__doclick.bind (this);

Initialization is completed, the click will make a corresponding judgment, and use This._$setindex (index) to jump.

For more articles on pagination tutorials, see the following topics:

JavaScript paging feature operations
jquery paging feature operations
PHP paging feature operations
ASP. NET paging feature Operation

Download: Paper

The above is the entire content of this article, I hope to help you learn.