jquery - Pagination using Javascript -



jquery - Pagination using Javascript -

trying implement pagination jquery accordion using javascript. found link javascript class implement accordion pagination. however, it's not behaving expected. played while no result. can please help me figure fault is? i'd appreciated much. here created jsfiddle it.

javascript code

var paginatorhandle = null; jquery(document).ready(function () { jquery("#dalist").accordion({ autoheight: false }); paginatorhandle = jquery("#dalist").paginateaccordion({ "currentpage": 0, "itemsperpage": 3, "paginatorcontrol": jquery("#accordionpaginator") }); // initial paginate phone call paginatorhandle.paginate(); jquery("#accordionpaginator .nextpage").click(function () { paginatorhandle.nextpage(); }); jquery("#accordionpaginator .previouspage").click(function () { paginatorhandle.previouspage(); }); jquery("#accordionpaginator .gotopage").change(function () { var pageindex = parseint($(this).val(), radix); paginatorhandle.gotopage(pageindex); }); }); //this main class function accordionpaginator(element, currentpage, itemsperpage, paginatorcontrol) { this.element = element; this.currentpage = currentpage; this.itemsperpage = itemsperpage; this.paginatorcontrol = paginatorcontrol; // actual pagination (shows/hides items) this.paginate = function () { var index = this.currentpage * this.itemsperpage; element.accordion("activate", index); element.children().hide(); if (index < 0) { this.element.children("div:first").show(); this.element.children("h3:first").show(); } else { this.element.children("div:eq(" + index + ")") .show(); this.element.children("h3:eq(" + index + "),h3:gt(" + index + ")") .filter(":lt(" + this.itemsperpage + ")") .show(); } this.refreshcontrol(); }; // increments currentpage var (if possible) , calls paginate this.nextpage = function () { if (this.currentpage + 1 >= this.getmaxpageindex()) { return; } this.currentpage++; this.paginate(); }; // decrements currentpage var (if possible) , calls paginate this.previouspage = function () { if (this.currentpage - 1 < 0) { return; } this.currentpage--; this.paginate(); }; // sets currentpage var (if possible) , calls paginate this.gotopage = function (pageindex) { if ((pageindex < 0) || (pageindex >= this.getmaxpageindex())) { return; } this.currentpage = pageindex; this.paginate(); }; // returns maximum of pages possible current number of items this.getmaxpageindex = function () { var items = this.element.children("h3"); var fullpages = items.length / this.itemsperpage; var restpage = items.length % (this.itemsperpage > 0 ? 1 : 0); homecoming fullpages + restpage; }; // fills paginator command this.refreshcontrol = function () { if (this.paginatorcontrol === null) { return; } var pagelist = this.paginatorcontrol.children(".gotopage"); pagelist.empty(); (var = 0; < this.getmaxpageindex(); i++) { pagelist.append("<option value=\"" + + "\">" + (i + 1) + "</option>"); } pagelist.val(this.currentpage); }; } jquery.fn.extend({ paginateaccordion: function (options) { var currentpage = options.currentpage ?parseint(options.currentpage, radix) : 0; var itemsperpage = options.itemsperpage ? parseint(options.itemsperpage, radix) : 5; var paginatorcontrol = options.paginatorcontrol; homecoming new accordionpaginator(this, currentpage, itemsperpage, paginatorcontrol); } });

i made couple of changes code in jsfiddle , pagination worked. here link modified jsfiddle. http://jsfiddle.net/molwmyyr/

i removed

<script src="//code.jquery.com/jquery-1.10.2.js"></script>

and used jsfiddle frameworks , extensions include jquery

i changed jquery ui include

<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

i moved

jquery.fn.extend({ paginateaccordion: function (options) { var currentpage = options.currentpage ?parseint(options.currentpage, 10) : 0; var itemsperpage = options.itemsperpage ? parseint(options.itemsperpage, 10) : 5; var paginatorcontrol = options.paginatorcontrol; homecoming new accordionpaginator(this, currentpage, itemsperpage, paginatorcontrol); } });

above document ready method.

and changed next line.

element.accordion("activate", index);

to element.accordion("option", "activate", index);

the pagination works. observed glitch when go next page , click on section 5, not collapsing section 4.

javascript jquery pagination accordion

Comments

Popular posts from this blog

Delphi change the assembly code of a running process -

json - Hibernate and Jackson (java.lang.IllegalStateException: Cannot call sendError() after the response has been committed) -

C++ 11 "class" keyword -