How to implement bootstrap paging-Bootstrap Tutorial-php.cn

How to implement bootstrap paging

藏色散人

Release： 2023-01-13 00:22:13

Original

4044 people have browsed it

The implementation method of bootstrap paging: first use div to wrap the content that will be cleared; then use the a tag to implement the functions of the previous page and the next page; finally implement the initial loading and previous page through ajax And the effect on the next page is enough.

How to implement bootstrap paging

The operating environment of this tutorial: Windows 7 system, bootsrap version 3.3.7, Dell G3 computer. This method is suitable for all brands of computers.

##bootstrap implements paging

Algorithm improvement: [Mainly using js with mysql limit to realize the previous page and next page]

[When querying data, limit is used. Now, I display 3 records per page. Paging】

First, ajax initiates a request to the servlet, and then requests the json data. Now, start designing ajax and html.

1. Every time the page is turned, the previous data will be overwritten/cleared. So use a div to wrap the content that will be cleared.

Why should we keep the div? Because we also need to add data to it and keep it, similar to a reference object.

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h"，后面都要动态清空-->
</div>

Copy after login

Now, there is a basic design framework where the data is stored. So now, should there be something to operate on the data, such as: previous page, next page.

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

Here, I use the nextpage method to implement the next page, and the previous page uses prevpage. First there is such an idea

<a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

Copy after login

In this case, now it is ajax to implement data loading

3. Ajax implements initial loading, previous page, and next page.

key represents the number of records, that is, the starting data of the record. We first think about it. When the operations of other pages change, the parameters of the previous page and the parameters of the next page should change. With the key And change.

is roughly as follows:

//1、默认加载第一页
clickA(0);
//2、加载数据的函数
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "Page", //请求发送到Page处
data : {&#39;key&#39;:key},
dataType : "json", //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
for(var k in result){
//将获得的数据加入col-md-12 column
$("#con").before("<h2 class=&#39;h&#39;>"+result[k].title+"</2><p class=&#39;h&#39;>"+result[k].name+"</p><p class=&#39;h&#39;><a class=&#39;btn&#39; href=&#39;javascript:clickA(0);&#39;>View details »</a>"+"</p>");
//改变a标签prev的属性，下面这两句是重点
$("#prev").attr("href","javascript:prevpage("+key+")");
$("#next").attr("href","javascript:nextpage("+key+")");
} 
},
error : function(XMLHttpRequest, textStatus,errorMsg) {
//请求失败时执行该函数
alert("错误码:"+XMLHttpRequest.status);
alert("错误状态:"+XMLHttpRequest.readyState);
alert("数据请求数据失败!"+errorMsg);
}
});
}
//3、实现上一页功能:
function prevpage(prev){
if(prev==0){clickA(0);}else{
prev = prev-3;
clickA(prev);
}
//4、实现下一页功能
var numa=0;
function nextpage(numa){
//获取当前的key 
//将key+3，然后交给clickA
//获取后台带到的key，在key的基础上增加
numa=numa+3;
clickA(numa);
}
}

Copy after login

Mainly records the implementation of ideas. The code needs to be optimized, but the idea is already very clear. So, the above is to confirm that 3 pieces of data are displayed on each page. Then, to achieve each page How to display n pieces of data? It probably doesn't take much.

Then, please think for yourself, how to implement the issues raised here and package it into something of your own? I won’t write this step down.

So how to control the background servlet to prevent exceptions? That is the problem of value. Whenever null or "", or <0, etc. appear, set its value to 0, which can be solved.

The above is the detailed content of How to implement bootstrap paging. For more information, please follow other related articles on the PHP Chinese website!