Le plugin de pagination Bootstrap Paginator se combine avec ajax pour obtenir un effet de pagination dynamique sans actualisation

Adresse de téléchargement du plug-in de pagination Bootstrap Paginator :

DownloadVisit Project dans GitHub

1 Il s'agit de la fonction js pour les pages qui doivent être paginées :

<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>

<.>

Page :

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

*li généré automatiquement

2. le plus important est de modifier vous-même le fichier source bootstrap-paginator.js, comme suit :

<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>

* Appelez la recherche de personnes après le Le style de page sur lequel vous avez cliqué sort. (page), les paramètres dans le fichier source de la page ici sont déjà là, transmettez-les directement !

Effet : Lorsque le style est modifié, utilisez directement la valeur de la page du contrôle pour envoyer une requête ajax ! Enfin, aucune pagination de rafraîchissement n’est réalisée.

Ce qui précède est les connaissances pertinentes que l'éditeur vous présente en combinant le plug-in de pagination Bootstrap Paginator avec ajax pour obtenir un effet de pagination dynamique sans rafraîchissement, je l'espère. sera utile à tout le monde. Si vous avez des questions, laissez-moi un message et je vous répondrai à temps. Je voudrais également vous remercier tous pour votre soutien au site Web PHP chinois !

Pour plus d'articles sur la combinaison du plug-in de pagination Bootstrap Paginator et d'ajax pour obtenir un effet de pagination dynamique sans actualisation, veuillez faire attention au site Web PHP chinois !