Benefits to ~ Share a jquery-based paging control

There are a lot of front page pagination controls, and here's my implementation. By default, clicking on the page number will add "#p页码" after the URL, just like the blog park.

There are 2 parameters to be aware of:

BeforeRender: A jquery object with a page number that is called before each page entry is rendered. At this point we can do some processing before rendering, such as adding our own properties. By default, clicking on the page number adds "#p页码" after the URL, so the URL does not refresh the page. If we need to refresh the page, for example the URL is, "default.aspx?index= page number", it can be processed in this callback function.

callback: Click on the page number trigger, the parameter is the entire options. Clicking on the page number does not initiate an AJAX request and needs to be handled by itself, Options.index is the page number for this click. Sometimes our totals may change, callback can return the options parameter, as long as the total is reset and then go back.

Specifically, the invocation example is clear.

Source:

/* Paging Control v1.0 date:2015.08.26*/(function (window,$) {$.fn.pagination = function (options) {var _dftopts = { count:0,//Total size:10,//number per page index:1,//The current page lrcount:5,//the maximum number of pages left or right lcount:0            ,//initial reserved quantity rcount:0,//last reserved quantity first: "Home", End: "Last", Before: "Prev",            Next: "Next Page", Url:location.pathname + location.search + "#p",//Destination address callback:null,//Click event        beforerender:null//before the item is rendered};        $.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;            Previous 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 section for (i = from;i <= to;i++) {if (i = = = _inde                x) {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 < _lrcount) {from = _page-_continuecount + 1;            return {from:from,to:_page};            } to = _index + _lrcount; 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 ("a"). 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);            Jnext.attr ("href", _url+ (_index+1));        }} function Appendellipsis () {jpager.append (_ellipsis); }//event function Regisiterevent () {Jpager.on ("MouseEnter", "a", function () {var JT                He = $ (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,$);

The style is simple and can be adjusted 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;}

Examples of Use:

$ (". Div1"). Pagination ({        count:200,        size:10,        index:1,        lrcount:3,        lcount:1        , Rcount:1,                   callback:function (options) {             //alert (options.index);                       Options.count = +;            return options;        },        beforerender:function (JA) {            //ja.attr ("href", "default.aspx?index=" +ja.text () );        }         });

Pagination.js 1.0 There may be some deficiencies and bugs that I will fix in a timely manner.

Benefit to ~ share a jquery-based pagination control