Comment implémenter la pagination bootstrap

Comment implémenter la pagination bootstrap : utilisez d'abord div pour envelopper le contenu qui sera effacé ; puis utilisez la balise a pour implémenter les fonctions de la page précédente et enfin de la page suivante ; via ajax Et l'effet sur la page suivante est suffisant.

L'environnement d'exploitation de ce tutoriel : système Windows 7, bootsrap version 3.3.7, ordinateur Dell G3 Cette méthode convient à toutes les marques d'ordinateurs.

Recommandé : "tutoriel vidéo bootstrap" "tutoriel vidéo CSS"

implémentation de la pagination bootstrap

Amélioration de l'algorithme : [Utiliser principalement js avec la limite mysql pour implémenter la page précédente et la page suivante]

[Lors de l'interrogation des données, la limite est utilisée. Désormais, j'affiche 3 enregistrements par page.

<.>Tout d'abord, ajax initie une requête au servlet, puis demande les données json. Maintenant, commencez à concevoir des fichiers Ajax et HTML.

1. Chaque fois que vous tournez la page, les données précédentes seront écrasées/effacées. Utilisez donc un div pour envelopper le contenu qui sera effacé.

Pourquoi devrions-nous le conserver dans le div ? Parce que nous devons également y ajouter des données et les conserver, comme un objet de référence.

<div id="co">
        <h1 class="h"></h1>  <!-- 这里的标签都加上class="h"，后面都要动态清空-->
</div>

Maintenant, il existe un cadre de conception de base dans lequel les données sont stockées, alors maintenant, devrait-il y avoir quelque chose à opérer sur les données, comme : page précédente, page suivante.

2. Utilisez la balise a pour réaliser les fonctions de la page précédente et de la page suivante.

Ici, j'utilise la méthode nextpage pour implémenter la page suivante, et la page précédente utilise la page précédente. D'abord, il y a une telle idée

<a href="javascript:prevpage(0)">上一页</a><a href="javascript:nextpage(0)">下一页</a>

Dans ce cas, c'est maintenant ajax qui implémente le chargement des données

Troisièmement, ajax implémente le chargement initial, la page précédente et la page suivante.

la clé représente le nombre d'enregistrements, 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. devrait changer. Avec la clé Et changer.

est à peu près 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);
}
}

Enregistre principalement la mise en œuvre des idées. Le code doit être optimisé, mais l'idée est déjà très claire. Donc, ce qui précède est de confirmer que 3 morceaux. de données sont affichées sur chaque page Ensuite, pour réaliser chaque page Comment afficher n données ? Cela ne prend probablement pas grand-chose.

Alors, s'il vous plaît, réfléchissez par vous-même, comment réaliser le problème soulevé ici et le regrouper dans quelque chose qui vous est propre ? Je n’écrirai pas cette étape.

Alors, comment contrôler le servlet d'arrière-plan pour éviter les exceptions ? C'est le problème des valeurs. Chaque fois que null ou "", ou

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!