Maison > interface Web > Tutoriel d'amorçage > Comment implémenter la pagination à l'aide de bootstrap

Comment implémenter la pagination à l'aide de bootstrap

WBOY
Libérer: 2022-02-17 15:19:33
original
10577 Les gens l'ont consulté

Comment utiliser bootstrap pour implémenter la pagination : 1. Utilisez des éléments div pour envelopper le contenu qui sera effacé lors du tournage des pages ; 2. Utilisez des balises avec les méthodes nextpage et prevpage pour implémenter les fonctions de la page précédente et de la page suivante ; .Utilisez ajax pour implémenter Juste le chargement initial.

Comment implémenter la pagination à l'aide de bootstrap

L'environnement d'exploitation de ce tutoriel : système Windows 10, bootstrap version 3.3.7, ordinateur DELL G3

Comment implémenter la pagination à l'aide de bootstrap

1 Nous savons que les données précédentes seront écrasées à chaque fois que nous le ferons. tourner la page Ou effacer pour que nous puissions utiliser div pour envelopper le contenu qui sera effacé. Alors pourquoi devrions-nous le conserver dans le div ? Parce que nous avons encore besoin d'y ajouter des données, nous le conservons donc pour avoir pour effet de l'utiliser comme objet de référence. Le code est le suivant :

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h",后面都要动态清空-->
</div>
Copier après la connexion

2. balise pour réaliser la fonctionnalité de la page précédente et de la page suivante.

Dans cette étape, j'utilise la méthode nextpage pour implémenter la page suivante, et la page précédente utilise la page précédente ; le code est le suivant :

<a href="javascript:prevpage(0)">上一页</a>
<a href="javascript:nextpage(0)">下一页</a>
Copier après la connexion

3 Ajax implémente le chargement initial

Nous utilisons la clé pour indiquer le nombre d'enregistrements. lors du chargement, c'est-à-dire les données de départ de l'enregistrement, on y pense d'abord, lorsque les opérations des autres pages changent, les paramètres de la page précédente et les paramètres de la page suivante doivent changer, et changer avec la touche.

Le code est le suivant :

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

Recommandations associées : Tutoriel bootstrap

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en 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