So implementieren Sie Paging mithilfe von Bootstrap

So verwenden Sie Bootstrap, um Paging zu implementieren: 1. Verwenden Sie div-Elemente, um den Inhalt zu umschließen, der beim Umblättern gelöscht wird. 2. Verwenden Sie Tags mit den Methoden nextpage und prevpage, um die Funktionen der vorherigen Seite und der nächsten Seite zu implementieren . Verwenden Sie Ajax, um Just Initial Load zu implementieren.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Bootstrap-Version 3.3.7, DELL G3-Computer

So implementieren Sie Paging mit Bootstrap

1 Wir wissen, dass die vorherigen Daten jedes Mal überschrieben werden blättern Sie um oder löschen Sie; damit wir den Inhalt, der gelöscht werden soll, mit div umschließen können. Warum sollten wir es also im Div behalten? Weil wir noch Daten hinzufügen müssen, damit es als Referenzobjekt verwendet wird. Der Code lautet wie folgt:

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

2 Tag, um die Funktionalität der vorherigen Seite und der nächsten Seite zu realisieren.

In diesem Schritt verwende ich die Methode nextpage, um die nächste Seite zu implementieren, und die vorherige Seite verwendet prevpage. Der Code lautet wie folgt:

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

3 Wir verwenden den Schlüssel, um die Anzahl der Datensätze anzugeben Beim Laden, das heißt, die Startdaten des Datensatzes, denken wir zuerst darüber nach, dass sich die Parameter der vorherigen Seite und die Parameter der nächsten Seite ändern sollten, wenn sich die Vorgänge anderer Seiten ändern, und ändern Sie sie mit der Taste.

Der Code lautet wie folgt:

//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);
}
}

Verwandte Empfehlungen:

Bootstrap-Tutorial

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Paging mithilfe von Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!