jquery's pager pager implementation code _jquery

Source: Internet
Author: User
Tags prev tagname

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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.