Simple paging Control Based on jquery and jquery paging Control

Simple paging Control Based on jquery and jquery paging Control

There are many front-end paging controls. Here we will share my pagination. js Version 1.0, which is based on jquery.

Let's take a look at the preview effect:

By default, clicking the page number will add "# p page number" after the url, just like the blog garden ".

The control has two parameters. Note the following:

1. beforeRender: this parameter is called before each page number item is displayed. The parameter is a jQuery object of the page number. At this time, we can do some processing before rendering, such as adding our own attributes. By default, clicking the page number will add "# p page number" after the url. Such a url will not refresh the page. If we need to refresh the page, for example, the url is, "default. aspx? Index = page number, which can be processed in this callback function.

2. callback: Click the page number to trigger the call. The parameter is the entire options. Clicking the page number does not initiate an ajax request and needs to be processed by yourself. options. index is the page number of this click. Sometimes our total number may change. callback can return the options parameter. Here, you only need to reset the total number and then return.

For details, see the call example.

Source code:

/* Paging control v1.0 date: 2015.08.26 */(function (window, $) {$. fn. pagination = function (options) {var _ dftOpts = {count: 0, // total size: 10, // index: 1 per page, // lrCount: 5 on the current page, // The maximum number of lCount: 0 on the left and right of the current page, // The initial reserved quantity rCount: 0, // The last reserved quantity first: "Homepage", last: "Last page", before: "Previous Page", next: "next page", callback: null, // click the event beforeRender: null // before the item is displayed}; $. extend (_ dftOpts, options); var count = _ dftOpts. count; if (count <= 0) return; var _ ellipsis = "..."; Var _ size = _ dftOpts. size> 0? (_ DftOpts. size> count? Count: _ dftOpts. size): 1; var _ page = Math. ceil (count/_ size); var _ index = _ dftOpts. index> 0? (_ DftOpts. index> _ page? _ Page: _ dftOpts. index): 1; var _ lrcount = _ dftOpts. lrCount * 2 + 1> _ page? ParseInt (_ page-1)/2): _ dftOpts. lrCount; var _ continueCount = _ lrcount * 2 + 1; var _ lCount = _ dftOpts. lCount <= 0? 0: (_ dftOpts. lCount> _ page? _ Page-1: _ dftOpts. lCount); var _ rCount = _ dftOpts. rCount <= 0? 0: (_ dftOpts. rCount> _ page? _ Page-1: _ dftOpts. rCount); var _ first = _ dftOpts. first; var _ before = _ dftOpts. before; var _ last = _ dftOpts. last; var _ next = _ dftOpts. next; var _ FromTo; var _ url = location. pathname + location. search + "# p"; var jthis = this; var jPager = $ ("<div>", {"class": "pager"}); initJPager (); jthis. append (jPager); regisiterEvent (); return jthis;/* function */function initJPager () {_ FromTo = GetFromTo (); Var from = _ FromTo. from; var to = _ FromTo. to; var before = _ index <= 1? 1: _ index-1; var next = _ index> = _ page? _ Page: _ index + 1; var beforeLast = _ page-1; var jPrevs, jNexts; var I; // before if (from = 2 & _ lCount> 0) {appendLink (1);} else if (from> _ lCount + 1) {for (I = 0; I <_ lCount; I ++) {appendLink (I + 1) ;}if (_ lCount> 0) {appendEllipsis ();}} else {for (I = 1; I <from; I ++) {appendLink (I) ;}// continuous part for (I = from; I <=; I ++) {if (I ===_ index) {appendLink (I, true) ;}else {appendLink (I) ;}// after if (to = = BeforeLast & _ rCount> 0) {appendLink (_ page);} else if (to <_ page-_ rCount) {if (_ rCount> 0) {appendEllipsis () ;}for (I = _ page-_ rCount; I <_ page; I ++) {appendLink (I + 1 );}} else {for (I = to; I <_ page; I ++) {appendLink (I + 1) ;}} appendFirstAndLast () ;}function GetFromTo () {var from, to; from = _ index-_ lrcount; if (from <= 1) {return {from: 1, to: _ continueCount };} if (_ page-_ index <_ lrcou Nt) {from = _ page-_ continueCount + 1; return {from: from, to: _ page };}to = _ index + _ lrcount; to = to> _ page? _ Page: to; return {from: from, to: to};} function appendLink (index, active) {var jA =$ ("<a>", {text: index, href: _ url + index}); if (active) {jA. addClass ("active");} if (_ dftOpts. beforeRender) {_ dftOpts. beforeRender (jA);} jPager. append (jA);} function appendFirstAndLast () {var jFirst = $ ("<a>", {text: _ first }); var jBefore = $ ("<a>", {text: _ before}); var jLast = $ ("<a>", {text: _ last }); var jNext = $ ("<a> ",{ Text: _ next}); jPager. append (jNext ). append (jLast); jBefore. insertBefore (jPager. find (""). first (); jFirst. insertBefore (jBefore); if (_ index = 1) {jFirst. addClass ("disabled"); jBefore. addClass ("disabled");} else {jFirst. attr ("href", _ url + 1); jBefore. attr ("href", _ url + (_ index-1);} if (_ index = _ page) {jLast. addClass ("disabled"); jNext. addClass ("disabled");} else {jLast. attr ("href", _ url + _ page); jNex T. attr ("href", _ url + (_ index + 1) ;}} function appendEllipsis () {jPager. append (_ ellipsis);} // event function regisiterEvent () {jPager. on ("mouseenter", "a", function () {var jthis = $ (this); if (! Jthis. hasClass ("active ")&&! Jthis. hasClass ("disabled") {jthis. addClass ("hover ");}}). on ("mouseout", "a", function () {var jthis = $ (this); if (! Jthis. hasClass ("active") {jthis. removeClass ("hover ");}}). on ("click", "a", function () {var jItem = $ (this); if (jItem. hasClass ("disabled") {return;} var text = jItem. text (); var index = 0; switch (text) {case _ first: index = 1; break; case _ before: index = _ index-1; break; case _ last: index = _ page; break; case _ next: index = _ index + 1; break; default: index = parseInt (text); break ;} var callback = _ dftOpts. callback; var newOpts; _ dftOpts. index = index; jPager. remove (); if (callback) {newOpts = callback (_ dftOpts);} if (newOpts) {_ dftOpts = newOpts;} jthis. pagination (_ dftOpts) ;}}}) (window, $ );

Style:

The style is simple and can be adjusted by yourself.

.pager{height:30px;line-height:30px;font-size: 12px;margin: 25px 0px;text-align: center;color: #2E6AB1;overflow: hidden;}.pager a{border:1px solid #9AAFE5;color:#2E6AB1;margin:0px 5px;padding:5px 8px;text-decoration: none;}.pager a.hover,.pager a.active{background-color:#2E6AB1;border-color:#000080;color:#FFF;}.pager a.disabled{color:#C8CDD2;cursor:auto;}

Example:

$(".div1").pagination({   count:200,   size:10,   index:1,   lrCount:3,   lCount:1,   rCount:1,        callback:function(options){     //alert(options.index);          //options.count = 300;     //return options;   },   beforeRender:function(jA){     //jA.attr("href","default.aspx?index="+jA.text());   }   });

Pagination. js 1.0 may also have some shortcomings and bugs. I will fix them in time.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:

• Jquery paging control implementation code
• JQuery-based implementation of simple paging controls
• Jquery-based paging control (C #)
• Use JQUERY paging control in ANGULARJS
• Self-written jquery paging control (very simple and practical)