Ajax asynchronous paging request example using bootstrap-paginator.js paging, bootstrap paging example

Ajax asynchronous paging request example using bootstrap-paginator.js paging, bootstrap paging example

Ajax asynchronous paging requests using bootstrap-paginator.js pagination

The procedure is as follows:

First, define an ajax function for asynchronous request submission. The complete function is as follows:

Var nid = $ ("# lbnid "). val (); // obtain the current news number var cpage = 1; // the current page number var tpage = 10; // the total number of pages function getPaging () {getComment (cpage ); // get news comments} // click to view news comments $ ("# one2 "). click (function () {getPaging () ;}); // obtain the News Comment function getComment (page) {$. ajax ({type: "get", data: nid, async: "false", url: "/comment/GetComment? Nid = "+ nid +" & page = "+ page, success: function (info) {changeModel (info ); // update the local page var totalpage =$ ("# totalpage "). val (); // the current page number var curtpage = $ ("# curtpage "). val (); // total page number if (curtpage & totalpage) {cpage = curtpage; tpage = totalpage;} display (cpage, tpage); // display comments }, error: function () {alert ("loading failed! Please try again later! ") ;}}) ;}/ * Obj: html data returned by ajax * // update the function changeModel (obj) {var comt =$ (". comments "); comt. replaceWith ("<div class = Comments>" + obj + "</div>");}/* curreentpage: Current page number; tpage: total page count * // display News Comment function display (curtpage, tpage) {var options = {bootstrapMajorVersion: 3, // version currentPage: curtpage, // the current page number numberOfPages: 10, // set the number of displayed pages totalPages: tpage, // total number of pages itemTexts: function (type, page, current) {switch (type) {case "first ": return "Homepage"; case "prev": return "Previous page"; case "next": return "next page"; case "last": return "last page"; case "page ": return page ;}},}$ ("# page "). bootstrapPaginator (options );}

Next is to modify the original bootstrap-paginator.js file, this is also the most critical step

OnPageClicked: function (event, originalEvent, type, page) {// show the corresponding page and retrieve the newly built item related to the page clicked before for the event return var currentTarget = $ (event. currentTarget); switch (type) {case "first": currentTarget. bootstrapPaginator ("showFirst"); getComment (page); // custom method for getting news comments. Remember to add this custom function break; case "prev ": currentTarget. bootstrapPaginator ("showPrevious"); getComment (page); break; case "next": currentTarget. bootstrapPaginator ("showNext"); getComment (page); break; case "last": currentTarget. bootstrapPaginator ("showLast"); getComment (page); break; case "page": currentTarget. bootstrapPaginator ("show", page); getComment (page); break ;}},

Then OK. Run the following command:

 

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.