Bagaimana untuk melaksanakan paging menggunakan bootstrap

Cara menggunakan bootstrap untuk melaksanakan paging: 1. Gunakan elemen div untuk membungkus kandungan yang akan dikosongkan apabila membelok halaman 2. Gunakan teg a dengan kaedah nextpage dan prevpage untuk melaksanakan fungsi halaman sebelumnya dan halaman seterusnya; 3. , hanya gunakan ajax untuk mencapai pemuatan awal.

Persekitaran pengendalian tutorial ini: sistem Windows 10, bootstrap versi 3.3.7, komputer DELL G3

Cara menggunakan bootstrap untuk mencapai paging

1. Kami tahu bahawa data sebelumnya akan ditimpa atau dikosongkan setiap kali kami membuka halaman supaya kami boleh menggunakan div untuk membungkus kandungan yang akan dikosongkan. Jadi mengapa kita perlu menyimpannya dalam div kerana kita masih perlu menambah data padanya, jadi kita menyimpannya untuk mempunyai kesan yang sama seperti objek rujukan:

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

2 . Gunakan tag a, Laksanakan fungsi halaman sebelumnya dan halaman seterusnya.

Dalam langkah ini, saya menggunakan kaedah nextpage untuk melaksanakan halaman seterusnya, dan halaman sebelumnya menggunakan prevpage adalah seperti berikut:

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

3 Ajax melaksanakan pemuatan awal 🎜>

Semasa memuatkan, kami menggunakan kunci untuk mewakili bilangan rekod, iaitu, data permulaan rekod Kami mula-mula memikirkannya Apabila operasi halaman lain berubah, parameter halaman sebelumnya dan parameter halaman seterusnya harus berubah Kemudian, kunci.

Kod adalah seperti berikut:

//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);
}
}

Cadangan berkaitan:

tutorial bootstrap

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan paging menggunakan bootstrap. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!