The BootstrapPaginator paging plug-in is combined with ajax to achieve the effect of refreshing pages dynamically.

This article mainly introduces the combination of the BootstrapPaginator paging plug-in and ajax to achieve the dynamic and non-Refresh paging effect. It is very good and has reference value. If you are interested, let's take a look at the Bootstrap Paginator paging plug-in:

DownloadVisit Project in GitHub

1. This is the js function for paging pages:

Function paging (page) {$. ajax ({type: "GET", url: "$ {ctx}/api/v1/user/1/" + (page-1) + "/5", dataType: "json", success: function (msg ){.... // omitted (Data queried)}); $. ajax ({type: "GET", url: "$ {ctx}/api/v1/user/count/1", dataType: "json", success: function (msg) {var pages = Math. ceil (msg. data/5); // The total amount of data in the data is var element = $ ('# pageUl'); // corresponding to ul's IDvar options = {bootstrapMajorVersion: 3, currentPage: page, // the current page numberOfPages: 5, // several buttons are displayed on a page (5 li is generated in ul) totalPages: pages // total number of pages} element. bootstrapPaginator (options );}});}

Page:

* Automatically generated in li

2. The most important and core is to change the bootstrap-paginator.js source file, as follows:

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 returnvar currentTarget = $ (event. currentTarget); switch (type) {case "first": currentTarget. bootstrapPaginator ("showFirst"); paging (page); break; // Previous page case "prev": currentTarget. bootstrapPaginator ("showPrevious"); paging (page); break; case "next": currentTarget. bootstrapPaginator ("showNext"); paging (page); break; case "last": currentTarget. bootstrapPaginator ("showLast"); paging (page); break; case "page": currentTarget. bootstrapPaginator ("show", page); paging (page); break ;}},

* Call the paging (page) method after you click the page style. Here, the parameters in the page source file already exist and are directly transmitted!

Effect: When the style changes, send an ajax request directly with the page value of the control! Finally, no refreshing paging is implemented.

The above section describes how to use the Bootstrap Paginator paging plug-in combination with ajax to achieve the effect of refreshing pages dynamically. I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. I would like to thank you for your support for PHP chinnet!

For more information about how to use the Bootstrap Paginator paging plug-in and ajax to achieve dynamic and refreshing Paginator pages, see the PHP Chinese website!