這篇文章給大家分享的是有關(guān)Ajax怎么實(shí)現(xiàn)分頁(yè)查詢的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
創(chuàng)新互聯(lián)專注于汨羅企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開(kāi)發(fā),商城開(kāi)發(fā)。汨羅網(wǎng)站建設(shè)公司,為汨羅等地區(qū)提供建站服務(wù)。全流程專業(yè)公司，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
要求：
獲取數(shù)據(jù)庫(kù)中大量的信息顯示在頁(yè)面上，必然要使用到分頁(yè)查詢；
若不使用Ajax，而是用其他的方法，肯定是要刷新頁(yè)面的，用戶體檢很不好，
所以最好使用Ajax的方法寫(xiě)分頁(yè)查詢；
1.先來(lái)找一張數(shù)據(jù)很多的表吧！
一張簡(jiǎn)單的表
代碼，引入jquery包：
寫(xiě)一張表格，顯示我們的代號(hào)跟名稱：
| 代號(hào) |
名稱 |
操作 |
這些都很簡(jiǎn)單，沒(méi)毛??！
2.設(shè)一個(gè)當(dāng)前頁(yè)，定義一個(gè)變量為1（第一頁(yè)）：
var page = 1;
//當(dāng)前頁(yè)，默認(rèn)等于1
3.下面來(lái)寫(xiě)第一個(gè)方法：需要用ajax，這個(gè)方法主要起查詢，且分頁(yè)的作用：
function load()
{
$.ajax({
url: "jiazai.php",
// 顯示所有的數(shù)據(jù)不用寫(xiě)data
data:{page:page},
//當(dāng)前頁(yè)記得傳過(guò)去
type:"POST",
dataType: "TEXT",
success: function (data) {
}
});
}4.去寫(xiě)顯示數(shù)據(jù)的處理頁(yè)面;這里要考慮的是跳過(guò)多少條數(shù)據(jù)還有想要顯示多少條數(shù)據(jù)，用到limit：
Query($sql);
做完了第一步，來(lái)看看圖：
顯示數(shù)據(jù)實(shí)現(xiàn)！
好的，每頁(yè)先是三條數(shù)據(jù)已經(jīng)實(shí)現(xiàn)了，（頁(yè)面變成這樣我用了美化網(wǎng)頁(yè)的Bookstrap，前面有講到）
5.顯示分頁(yè)信息，寫(xiě)一個(gè)方法，先用ajax先獲取總頁(yè)數(shù)：
function loadfenye()
{
var s = "";
//用于接收
var xiao = 1;
// 最大頁(yè)
var da = 1;
// 最小頁(yè)
$.ajax({
async:false,
// 做成同步
url:"zys.php",
dataType:"TEXT",
success:function(data){
da = data;
//最大頁(yè)數(shù)
}
});
}接下來(lái)做查詢總頁(yè)數(shù)的php頁(yè)面：
strquery($sql);
//總條數(shù)
echo ceil($zts/3);
//ceil向上取整
好啦，總頁(yè)數(shù)獲取到了，回來(lái)把分頁(yè)寫(xiě)完吧：
//加載分頁(yè)信息方法
function loadfenye()
{
var s = "";
//用于接收
var xiao = 1;
// 最大頁(yè)
var da = 1;
// 最小頁(yè)
$.ajax({
async:false,
// 做成同步
url:"zys.php",
dataType:"TEXT",
success:function(data){
da = data;
//最大頁(yè)數(shù)，查到的最大頁(yè)數(shù)交個(gè)默認(rèn)的最大頁(yè)數(shù)
}
});
//加載上一頁(yè)
s += "«";
// 加載分頁(yè)列表
for(i=page-4;i
=xiao && i<=da)
{
s += " "+i+""
}
}
// 加載下一頁(yè)
s += "»";
$("#fenye").html(s);
}這樣寫(xiě)完了以后，來(lái)看圖：
分頁(yè)的信息也顯示出來(lái)了
6.來(lái)把默認(rèn)選中頁(yè)數(shù)的背景色來(lái)改變一下吧
看一下Bookstrap；改背景色的方法吧：
很顯然是多了一個(gè)active的樣式，我們用判斷給加上吧
if(i>=xiao && i<=da) {
if (i == page) {
s += " " + i + ""
}
else {
s += " " + i + "";
}好了，看一下：
可以，沒(méi)毛病
7.做頁(yè)數(shù)的點(diǎn)擊事件，實(shí)現(xiàn)點(diǎn)擊頁(yè)數(shù)跳轉(zhuǎn)到該頁(yè)數(shù)并顯示數(shù)據(jù)，還要更新列表；
先給數(shù)字列表加上一個(gè)class
s += " " + i + ""
然后寫(xiě)方法：
//給列表加上點(diǎn)擊事件
$(".list").click(function(){
//改變當(dāng)前頁(yè)數(shù)
//把點(diǎn)擊的頁(yè)數(shù)，扔給page（當(dāng)前頁(yè)）
page = $(this).text();
// page獲取了當(dāng)前頁(yè)，重新加載以下方法
//調(diào)用load方法
load();
//把加載數(shù)據(jù)封裝成一個(gè)方法
loadfenye();
//加載分頁(yè)信息方法
})
}當(dāng)我點(diǎn)擊第五頁(yè)：
沒(méi)毛??；
8.再來(lái)就是上一頁(yè)和下一頁(yè)的點(diǎn)擊事件了，首先是上一頁(yè)的點(diǎn)擊事件：
首先在上一頁(yè)的列表里加上class，便于寫(xiě)事件：
s += "«";
來(lái)，上一頁(yè)點(diǎn)擊事件：
$(".sy").click(function(){
//改變當(dāng)前頁(yè)
if(page>1)
{
//如果不是第一頁(yè)
page = parseInt(page) - 1;
}
// page獲取了當(dāng)前頁(yè)，重新加載以下方法
//調(diào)用load方法
load();
//把加載數(shù)據(jù)封裝成一個(gè)方法
loadfenye();
//加載分頁(yè)信息方法
})下一頁(yè)的點(diǎn)擊事件：
同上：列表里加上class，便于寫(xiě)事件：
s += "»";
下一頁(yè)點(diǎn)擊事件：
//下一頁(yè)點(diǎn)擊事件
$(".xy").click(function(){
// alert(da);
if(page好，完美實(shí)現(xiàn)ajax分頁(yè)查詢；
8.再加一個(gè)按條件查詢：
加上文本框：
來(lái)寫(xiě)點(diǎn)擊事件：
//給查詢加點(diǎn)擊事件
$("#chaxun").click(function(){
//重新加載
//調(diào)用load方法
load();
//把加載數(shù)據(jù)封裝成一個(gè)方法
loadfenye();
//加載分頁(yè)信息方法
})接下來(lái)我們需要改一下這兩個(gè)方法：
ajax只需要把文本框的name傳過(guò)去就好啦：
data:{page:page,name:name},
type:"POST",data:{name:name},
type:"POST",在處理頁(yè)面，設(shè)置一個(gè)恒等的條件：
$tj = " 1=1 ";
if(!empty($_POST["name"]))
{
$name = $_POST["name"];
$tj = " name like '%{$name}%' ";
}最后在sql語(yǔ)句后面調(diào)用就好啦
圖：
頁(yè)面不刷新的分頁(yè)查詢就歐克了；
源碼：
顯示頁(yè)面：
無(wú)標(biāo)題文檔
.xq{
margin-left: 5px;
}
#fenye li:hover{
cursor:pointer ;
}
顯示數(shù)據(jù)
| 代號(hào) |
名稱 |
操作 |
×
詳情
重慶分公司
重慶分公司