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

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.

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>

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>

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 : {'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);
}
}

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!