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
Post a Comment