PHP+jquery+ajax實(shí)現(xiàn)分頁
更新時(shí)間：2016年12月09日 08:32:00 作者：_MOSS
這篇文章主要為大家詳細(xì)介紹了PHPjquery+ajax實(shí)現(xiàn)分頁的代碼,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了jquery ajax實(shí)現(xiàn)分頁的具體代碼，供大家參考，具體內(nèi)容如下
HTML
<div id="list"> <ul></ul> </div> <div id="pagecount"></div>
CSS
#list{width:680px; height:530px; margin:2px auto; position:relative}
#list ul li{float:left;width:220px; height:260px; margin:2px}
#list ul li img{width:220px; height:220px}
#list ul li p{line-height:22px}
#pagecount{width:500px; margin:10px auto; text-align:center}
#pagecount span{margin:4px; font-size:14px}
#list ul li#loading{width:120px; height:32px; border:1px solid #d3d3d3;
position:absolute; top:35%; left:42%; text-align:center; background:#f7f7f7
url(loading.gif) no-repeat 8px 8px;-moz-box-shadow:1px 1px 2px rgba(0,0,0,.2);
-webkit-box-shadow:1px 1px 2px rgba(0,0,0,.2); box-shadow:1px 1px 2px rgba(0,0,0,.2);}
jQuery
我們先聲明變量，后面的代碼要用到以下變量。
var curPage = 1; //當(dāng)前頁碼 var total,pageSize,totalPage; //總記錄數(shù)，每頁顯示數(shù)，總頁數(shù)
接下來，我們自定義一個(gè)函數(shù)：getData()，用來獲取當(dāng)前頁數(shù)據(jù)。函數(shù)中，我們利用$.ajax()向后臺(tái)pages.php發(fā)送POST異步請(qǐng)求，將當(dāng)前頁碼以JSON格式傳遞給后臺(tái)。
//獲取數(shù)據(jù)
function getData(page){
$.ajax({
type: 'POST',
url: 'pages.php',
data: {'pageNum':page-1},
dataType:'json',
beforeSend:function(){
$("#list ul").append("<li id='loading'>loading...</li>");//顯示加載動(dòng)畫
},
success:function(json){
$("#list ul").empty();//清空數(shù)據(jù)區(qū)
total = json.total; //總記錄數(shù)
pageSize = json.pageSize; //每頁顯示條數(shù)
curPage = page; //當(dāng)前頁
totalPage = json.totalPage; //總頁數(shù)
var li = "";
var list = json.list;
$.each(list,function(index,array){ //遍歷json數(shù)據(jù)列
li += "<li><a href='#'><img src='"+array['pic']+"'>"+array['title']
+"</a></li>";
});
$("#list ul").append(li);
},
complete:function(){ //生成分頁條
getPageBar();
當(dāng)點(diǎn)擊分頁條中的分頁鏈接時(shí)，調(diào)用getData(page)加載對(duì)應(yīng)頁碼的數(shù)據(jù)?！ ?
$("#pagecount span a").on('click',function(){
var rel = $(this).attr("rel");
if(rel){
getData(rel);
}
});
},
error:function(){
alert("數(shù)據(jù)加載失敗");
}
});
}
請(qǐng)求成功后并返回?cái)?shù)據(jù)，將相應(yīng)的數(shù)據(jù)附給變量，并將返回的商品數(shù)據(jù)列表循環(huán)展示到對(duì)應(yīng)容器#list ul中。當(dāng)數(shù)據(jù)完全加載完畢后，調(diào)用分頁條函數(shù)getPageBar()生成分頁條。
//獲取分頁條
function getPageBar(){
//頁碼大于最大頁數(shù)
if(curPage>totalPage) curPage=totalPage;
//頁碼小于1
if(curPage<1) curPage=1;
pageStr = "<span>共"+total+"條</span><span>"+curPage
+"/"+totalPage+"</span>";
//如果是第一頁
if(curPage==1){
pageStr += "<span>首頁</span><span>上一頁</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='1'>首頁</a></span>
<span><a href='javascript:void(0)' rel='"+(curPage-1)+"'>上一頁</a></span>";
}
//如果是最后頁
if(curPage>=totalPage){
pageStr += "<span>下一頁</span><span>尾頁</span>";
}else{
pageStr += "<span><a href='javascript:void(0)' rel='"+(parseInt(curPage)+1)+"'>
下一頁</a></span><span><a href='javascript:void(0)' rel='"+totalPage+"'>尾頁</a>
</span>";
}
$("#pagecount").html(pageStr);
}
最后，當(dāng)頁面第一次加載時(shí)，我們加載第一頁數(shù)據(jù)即getData(1)，
$(function(){
getData(1);
});
PHP
pages.php接收每次前端頁面的ajax請(qǐng)求，根據(jù)提交的頁碼pageNum值，從mysql數(shù)據(jù)庫中獲取數(shù)據(jù)，計(jì)算總記錄數(shù)和總頁數(shù)，讀取對(duì)應(yīng)頁碼下的數(shù)據(jù)列表，并將最終結(jié)果以JSON格式返回給前端頁面。
include_once('connect.php'); //連接數(shù)據(jù)庫，略過，具體請(qǐng)下載源碼查看
$page = intval($_POST['pageNum']); //當(dāng)前頁
$result = mysql_query("select id from food");
$total = mysql_num_rows($result);//總記錄數(shù)
$pageSize = 6; //每頁顯示數(shù)
$totalPage = ceil($total/$pageSize); //總頁數(shù)
$startPage = $page*$pageSize; //開始記錄
//構(gòu)造數(shù)組
$arr['total'] = $total;
$arr['pageSize'] = $pageSize;
$arr['totalPage'] = $totalPage;
$query = mysql_query("select id,title,pic from food order by id asc limit
$startPage,$pageSize"); //查詢分頁數(shù)據(jù)
while($row=mysql_fetch_array($query)){
$arr['list'][] = array(
'id' => $row['id'],
'title' => $row['title'],
'pic' => $row['pic'],
);
}
echo json_encode($arr); //輸出JSON數(shù)據(jù)
最后，附上Mysql表結(jié)構(gòu)
CREATE TABLE IF NOT EXISTS `food` ( `id` int(11) NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL, `pic` varchar(255) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=utf8;
精彩專題分享：jquery分頁功能操作 JavaScript分頁功能操作
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JQuery拖拽元素改變大小尺寸實(shí)現(xiàn)代碼
"元素拖拽改變大小"其實(shí)和"元素拖拽"一個(gè)原理,以下附出源碼原型，弄明白了原理再擴(kuò)展其他實(shí)際應(yīng)用，思路就變得簡(jiǎn)單、清晰得多了2012-12-12
密碼框提示文字的功能還是比較實(shí)用的，下面為大家介紹下使用jquery簡(jiǎn)單的實(shí)現(xiàn)下，喜歡的朋友可以參考下2013-08-08
Jquery如何實(shí)現(xiàn)點(diǎn)擊時(shí)高亮顯示代碼
點(diǎn)擊時(shí)高亮顯示代碼的實(shí)現(xiàn)方法有很多，下面的示例使用jquery來實(shí)現(xiàn)，需要的朋友可以了解下2014-01-01
jQuery Datatables表頭不對(duì)齊的解決辦法
這篇文章主要為大家詳細(xì)介紹了jQuery Datatables表頭不對(duì)齊的解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了Ztree新增角色和編輯角色回顯問題的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要介紹了自己編寫簡(jiǎn)單的jQuery提示插件的方法及示例，非常的不錯(cuò)，推薦給正在學(xué)習(xí)jQuery的小伙伴。2014-12-12
jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒
XSS指的是跨站腳本攻擊,比如人們常說的向$傳入字符串或者字符串轉(zhuǎn)換可執(zhí)行函數(shù)等一些安全方面值得注意的細(xì)節(jié),下面就為大家整理了jQuery使用中可能被XSS攻擊的一些危險(xiǎn)環(huán)節(jié)提醒2016-05-05
如果你還在猶豫是否要學(xué)習(xí)一個(gè)JavaScript框架，并困惑于選擇哪一個(gè)框架，那么我推薦你選擇jQuery。這并非說其它框架不好，只是jQuery可能是最穩(wěn)妥和最具回報(bào)性的選擇。2011-04-04
這篇文章主要為大家詳細(xì)介紹了jQuery樹控件zTree使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
下面小編就為大家?guī)硪黄猨Query效果函數(shù)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-09-09