Das Bootstrap Paginator-Paging-Plugin wird mit Ajax kombiniert, um einen dynamischen Paging-Effekt ohne Aktualisierung zu erzielen

Download-Adresse des Bootstrap Paginator-Paging-Plugins:

DownloadVisit Project in GitHub

1 Dies ist die js-Funktion für Seiten, die paginiert werden müssen:

<span style="font-size:14px;">function paging(page){
$.ajax({
type: "GET",
url: "${ctx}/api/v1/user/1/"+(page-1)+"/5",
dataType:"json",
success: function(msg){
....//省略（查询出来数据）
}
});
$.ajax({
type: "GET",
url:"${ctx}/api/v1/user/count/1",
dataType:"json",
success:function(msg){
var pages = Math.ceil(msg.data/5);//这里data里面有数据总量
var element = $(&#39;#pageUl&#39;);//对应下面ul的ID
var options = {
bootstrapMajorVersion:3,
currentPage: page,//当前页面
numberOfPages: 5,//一页显示几个按钮（在ul里面生成5个li）
totalPages:pages //总页数
}
element.bootstrapPaginator(options);
}
});
}</span>

Seite:

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>

*li automatisch generiert

2 Das Wichtigste ist Das Wichtigste ist, die Quelldatei von bootstrap-paginator.js selbst wie folgt zu ändern:

<span style="font-size:14px;">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 return
var currentTarget = $(event.currentTarget);
switch (type) {
case "first":
currentTarget.bootstrapPaginator("showFirst");
paging(page);
break;
//上一页
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;
}
},</span>

* Rufen Sie das Paging nach dem auf Wenn der Seitenstil, auf den Sie geklickt haben, angezeigt wird, sind die Parameter in der Seitenquelldatei hier bereits vorhanden. Übergeben Sie sie direkt!

Wirkung: Wenn der Stil geändert wird, verwenden Sie direkt den Seitenwert des Steuerelements, um eine Ajax-Anfrage zu senden! Schließlich wird kein Aktualisierungs-Paging erreicht.

Das Obige ist das relevante Wissen, das der Editor Ihnen durch die Kombination des Bootstrap Paginator-Paging-Plug-Ins mit Ajax vermittelt, um einen dynamischen, nicht aktualisierungsfähigen Paging-Effekt zu erzielen Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte mich auch bei Ihnen allen für Ihre Unterstützung der chinesischen PHP-Website bedanken!

Weitere verwandte Artikel über die Kombination des Bootstrap Paginator-Paging-Plug-Ins und Ajax zur Erzielung eines dynamischen Paging-Effekts ohne Aktualisierung finden Sie auf der chinesischen PHP-Website!