How to implement paging using bootstrap

How to use bootstrap to implement paging: 1. Use div elements to wrap the content that will be cleared when turning the page; 2. Use the a tag with the nextpage and prevpage methods to implement the functions of the previous page and the next page; 3. , just use ajax to achieve initial loading.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

How to use bootstrap to achieve paging

1. We know that the previous data will be overwritten or cleared every time we turn the page; so we can use div to wrap the content that will be cleared. So why should we keep it in the div? Because we still need to add data to it, so we keep it to have the same effect as a reference object. The code is as follows:

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

2. Use the a tag to achieve the above One page, next page function.

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

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

3. Ajax implements initial loading

We are here When loading, use key to indicate 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, depending on the key. Change.

The code is as follows:

//1、默认加载第一页
clickA(0);
//2、加载数据的函数
function clickA(key){
$(".h").empty();
$.ajax({
type : "post",
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "Page", //请求发送到Page处
data : {'key':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);
}
}

Related recommendations: bootstrap tutorial

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