javascript - Js Pagination error -
i need perform pagination need display 5 rows every time. first 5 rows displayed. on second click, next 5, third rows no. 11-15, , on. need display if @ least 1 row there (after n clicks totalrows mod 5 less 5). not this.
function rightarrow() { pagecount = document.getelementbyid('pgcnt').value; //totalrows / 5 totcount = document.getelementbyid('totcnt').value; //totalrows currpage = temprows - pagecount + 2; //current set of rows document.getelementbyid('temppage').value = temppage; var m = totcount%5; if(pagecount != temprows) m = 5; else { m = (totcount % 5) - 1; document.getelementbyid('rightarr').disabled = true; } document.getelementbyid('pgcnt').value = document.getelementbyid('pgcnt').value - 1; for(i = 0; < m;i++) { $.ajax({ type: "post", url: "geteodrow.php", data: "page=" + currpage + "&row=" + i, success: function(html) { var row = document.getelementbyid('chrecommend').insertrow(0); temp = html.split(","); for(j = 0; j < 9; j++) { str = temp[j].replace("\"",""); str = temp[j].replace("\"",''); str = temp[j].replace("[",''); col = row.insertcell(j); col.innerhtml = str; } } }); } currpage++; }
i realize question pretty dead, came across looking else, , figured i'd toss answer @ it. since it's not critical issue, went ahead , reworked you've got here plus lot of code didn't choose include.
// app namespace var myapp = {paging: {}}; // paging controller myapp.paging.controller = function(){ this.init.apply(this,arguments);}; myapp.paging.controller.prototype = { // initializer gets hooked init: function() { $.log("initializing paging controller.") // nodes we'll need this.totcntnode = document.getelementbyid("totcnt"); this.pgcntnode = document.getelementbyid("pgcnt"); this.currminnode = document.getelementbyid("currmin"); this.currmaxnode = document.getelementbyid("currmax"); this.prevpagebutton = document.getelementbyid("prevpagebutton"); this.nextpagebutton = document.getelementbyid("nextpagebutton"); this.pagecontainer = document.getelementbyid("pageofitems"); // mimic table's .insertrow make row adding easy this.pagecontainer.insertrow = function() { var row = document.createelement("div"); row.classname = "row clearfix"; (var = 0; < myapp.paging.model.itemsperrow; i++) { var cell = document.createelement("span"); row.appendchild(cell); } this.appendchild(row); return row; }; // attach listeners next , previous buttons this.prevpagebutton.onclick = this.showprevpage.bind(this); this.nextpagebutton.onclick = this.shownextpage.bind(this); // update display first time this.updatepageinfo(); }, // run whenever model has changed , needs update display updatepageinfo: function() { // info page we're on var currentpage = myapp.paging.model.currentpage, totalpages = myapp.paging.model.gettotalpages(), itemcount = myapp.paging.model.itemcount, pagesize = myapp.paging.model.getpagesize(), rowsperpage = myapp.paging.model.rowsperpage, rowsonthispage = math.ceil(myapp.paging.model.getitemsonpage(currentpage)/myapp.paging.model.itemsperrow); // clear out previous page data while (this.pagecontainer.children.length > 0) { this.pagecontainer.removechild(this.pagecontainer.children[0]); } // add space new page data (var rowind = 0; rowind < rowsonthispage ; rowind++) { this.pagecontainer.insertrow(); } $.log("loading page " + currentpage + "."); // request data via ajax each row for(var = 0; < rowsonthispage ; i++) { $.ajax({ type: myapp.paging.model.querytype, url: myapp.paging.model.queryuri, data: myapp.paging.model.getquerydata(currentpage, i), success: function(pagenum, rownum, result) { // don't serve data wrong page if (pagenum !== myapp.paging.model.currentpage) return; // when data back, put correct container // regardless of when received var row = this.pagecontainer.children[rownum], temp = result.replace(/[\["]/g,"").split(","), str = ""; for(var j = 0; j < temp.length; j++) { row.children[j].innerhtml = temp[j]; } }.bind(this, currentpage, i) }); } // update informational bits under items this.totcntnode.textcontent = itemcount; this.pgcntnode.textcontent = totalpages; var min = currentpage * (pagesize ) + 1; this.currminnode.textcontent = min; this.currmaxnode.textcontent = math.min(min + pagesize - 1, itemcount); // disable prev page button if there no previous pages if (currentpage <= 0) { if (this.prevpagebutton.classname.indexof("disabled") < 0) { this.prevpagebutton.classname += " disabled"; } } // enable prev page button if there previous pages else { if (this.prevpagebutton.classname.indexof("disabled") > -1) { this.prevpagebutton.classname = this.prevpagebutton.classname.replace(/(?:^|\s+)disabled(?!\s)/g, ""); } } // disable next page button if there next pages if (currentpage + 1 >= totalpages) { if (this.nextpagebutton.classname.indexof("disabled") < 0) { this.nextpagebutton.classname += " disabled"; } } // enable next page button if there next pages else { if (this.nextpagebutton.classname.indexof("disabled") > -1) { this.nextpagebutton.classname = this.nextpagebutton.classname.replace(/(?:^|\s+)disabled(?!\s)/g, ""); } } }, // called when next page button clicked. shownextpage: function() { if (myapp.paging.model.currentpage + 1 >= myapp.paging.model.gettotalpages()) { // shouldn't have been able activate anyway } else { myapp.paging.model.currentpage++; this.updatepageinfo(); } return false; }, // called when prev page button clicked showprevpage: function() { if (myapp.paging.model.currentpage <= 0) { // shouldn't have been able activate anyway } else { myapp.paging.model.currentpage--; this.updatepageinfo(); } return false; } }; // typically expect object created server , dropped dynamically onto page myapp.paging.model = { itemcount: 140, itemsperrow: 9, rowsperpage: 5, currentpage: 0, querytype: "post", queryuri: "geteodrow.php", querydataformat: "page={itempage}&row={itemrow}", gettotalpages: function() { with(myapp.paging.model) { return math.ceil(itemcount/(itemsperrow*rowsperpage)); } }, getpagesize: function() { with(myapp.paging.model) { return itemsperrow * rowsperpage; } }, getitemsonpage: function(pagenum) { with(myapp.paging.model) { return math.min(((pagenum+1) * getpagesize()), itemcount) - pagenum*getpagesize(); } }, getitemsinrow: function(pagenum, rownum) { with(myapp.paging.model) { var onpage = getitemsonpage(pagenum); return math.min((rownum+1)*itemsperrow, onpage) - rownum*itemsperrow; } }, getquerydata: function(itempage, itemrow) { with(myapp.paging.model) { var data = querydataformat; data = data.replace(/{itempage}/gi, itempage); data = data.replace(/{itemrow}/gi, itemrow); return data; } } }; so, whenever page loaded, onload handler or whatever, create , hang onto singleton instance of paging controller.
myapp.paging.controller.instance = new myapp.paging.controller(); this should handle issues ajax calls returning out of order partial pages of data , partial rows within pages.
Comments
Post a Comment