Shulou(Shulou.com)06/01 Report--

This article mainly shows you "how to achieve paging in bootstrap", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "how to achieve paging in bootstrap" this article.

1. We know that the data before we turn the page will be overwritten or emptied every time we turn the page, so we can use div to wrap the content that will be emptied. So why do we keep it in div, because we have to add data to it, so we keep it similar to the effect used as a reference, the code is as follows:

2. Use a tag to realize the function of previous page and next page.

In this step, I use the nextpage method to implement the next page, and the previous page uses the prevpage; code as follows:

Previous page the next page

3. Ajax to realize the initial loading

When we load, we use key to represent the number of records, that is, the starting data of the record. we first think that when the operation of other pages changes, the parameters of the previous page and the next page should change with key.

The code is as follows:

/ / 1. Load the first page clickA (0) by default; / / 2. Load the data function function clickA (key) {$(".h") .empty () $.ajax ({type: "post", async: true, / / Asynchronous request (synchronous request will lock the browser, and other user operations must wait for the request to be completed) url: "Page", / / the request is sent to Page data: {'key':key}, dataType: "json", / / returns data in the form of jsonsuccess: function (result) {/ / execute the function when the request is successful Result is the json object for (var k in result) returned by the server {/ / adds the obtained data to col-md-12 column$ ("# con") .before ("" + result [k] .title + "+ result [k] .name +"

View details »"+"

"); / / change the attribute of a tag prev, the following two sentences are the key $(" # prev "). Attr (" href "," _ javascript:prevpage ("+ key+")); $("# next"). Attr ("href", "_ javascript:nextpage (" + key+ ")");}, error: function (XMLHttpRequest, textStatus,errorMsg) {/ / execute this function alert ("error code:" + XMLHttpRequest.status); alert ("error status:" + XMLHttpRequest.readyState) Alert ("data request data failed!" + errorMsg);}};} / 3. Implement the previous page function: function prevpage (prev) {if (prev==0) {clickA (0);} else {prev= prev-3;clickA (prev);} / 4. Implement the next page function var numa=0;function nextpage (numa) {/ / get the current key / / will key+3, then send it to clickA// to obtain the key brought by the backend, and add numa=numa+3;clickA (numa) to key }} the above is all the contents of the article "how to achieve pagination in bootstrap". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.