Maison > interface Web > js tutoriel > Le plugin de pagination Bootstrap Paginator se combine avec ajax pour obtenir un effet de pagination dynamique sans actualisation

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

高洛峰
Libérer: 2017-01-10 14:24:27
original
2389 Les gens l'ont consulté

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>
Copier après la connexion
<. 🎜>

Page :

<span style="font-size:14px;"><ul class="pagination" id="pageUl">
</ul></span>
Copier après la connexion

*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>
Copier après la connexion

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

Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果

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 !

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal