php+ajax實現(xiàn)無刷新數(shù)據(jù)分頁的辦法
更新時間：2015年11月02日 15:34:10 投稿：lijiao
這篇文章主要介紹了php+ajax實現(xiàn)無刷新分頁的方法,詳細講述了數(shù)據(jù)庫的創(chuàng)建、Ajax文件的實現(xiàn)及PHP調(diào)用方法,需要的朋友可以參考下
本文實例講述了php+ajax實現(xiàn)無刷新分頁的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
index.php 文件，代碼如下:
<?php
header("Content-type: text/html;charset=GBK");//輸出編碼,避免中文亂碼
?>
<html>
<head>
<title>ajax分頁演示</title>
<script language="javascript" src="ajaxpg.js"></script>
<link rel="stylesheet" type="text/css" href="page.css">
</head>
<body>
<div id="result">
<?php
$page=isset($_GET['page'])?intval($_GET['page']):1; //這句就是獲取page=18中的page的值，假如不存在page，那么頁數(shù)就是1。
$num=3; //每頁顯示10條數(shù)據(jù)
$db=mysql_connect("localhost","root","123456"); //創(chuàng)建數(shù)據(jù)庫連接
mysql_select_db("demo",$db) or die("數(shù)據(jù)庫鏈接錯誤"); //選擇要操作的數(shù)據(jù)庫
mysql_query("set names gbk");
/*
首先咱們要獲取數(shù)據(jù)庫中到底有多少數(shù)據(jù)，才能判斷具體要分多少頁，具體的公式就是
總數(shù)據(jù)庫除以每頁顯示的條數(shù)，有余進一。
也就是說10/3=3.3333=4 有余數(shù)就要進一。
*/
$result=mysql_query("select * from brand");
$total=mysql_num_rows($result); //查詢所有的數(shù)據(jù)
$url='test.php';//設置ajax提交頁面地址的URL，這里設置成test.php通過ajax把參數(shù)傳遞給test.php再把處理過的內(nèi)容賦值到本頁的div id=result。
//頁碼計算
$pagenum=ceil($total/$num);//獲得總頁數(shù),也是最后一頁
$page=min($pagenum,$page);//獲得首頁
$prepg=$page-1;//上一頁
$nextpg=($page==$pagenum ? 0 : $page+1);//下一頁
$offset=($page-1)*$num; //獲取limit的第一個參數(shù)的值，假如第一頁則為(1-1)*10=0,第二頁為(2-1)*10=10。
$pagenav="<ul>";
//開始分頁導航條代碼：
$pagenav.="<li>顯示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 條記錄</li><li>共 $total 條記錄 </li>";
//如果只有一頁則跳出函數(shù)：
if($pagenum<=1) return false;
$pagenav.="<li> <a href=javascript：dopage('result','$url?page=1');>首頁</a></li> ";
if($prepg) $pagenav.="<li> <a href=javascript：dopage('result','$url?page=$prepg');>前頁</a></li> "; else $pagenav.=" <li>前頁</li> ";
if($nextpg) $pagenav.="<li><a href=javascript：dopage('result','$url?page=$nextpg');>后頁</a> </li>"; else $pagenav.=" <li>后頁</li> ";
$pagenav.="<li> <a href=javascript：dopage('result','$url?page=$pagenum');>尾頁</a></li> ";
$pagenav.="<li>第 $page 頁</li><li>共 $pagenum 頁</li></ul>";
//假如傳入的頁數(shù)參數(shù)大于總頁數(shù)，則顯示錯誤信息
If($page>$pagenum){
Echo "Error : Can Not Found The page ".$page;
Exit; //開源軟件:phpfensi.com
}
?></div><div id="results">
<?php
echo $pagenav;//輸出分頁導航
?>
</div>
</body>
</html>
css代碼:
/* CSS Document */
/* CSS Document */
#result ul li{
height:20px;
width:auto;
display:block;
color:#999;
border:1px solid #999;
float:left;
list-style:none;
font-size:12px;
margin-left:5px;
line-height:20px;
vertical-align:middle;
text-align:center;
}
#result ul li a:link{
width:50px;
height:20px;
display:block;
line-height:20px;
background:#09C;
border:1px solid #fff;
color:#fff;
text-decoration:none;
}
#result ul li a:hover{
width:50px;
height:20px;
display:block;
line-height:20px;
background:#09C;
border:1px solid #fff;
color:#F60;
text-decoration:none;
}
ajaxpg.js文件，如下:
// JavaScript Document
var http_request=false;
function send_request(url){//初始化，指定處理函數(shù)，發(fā)送請求的函數(shù)
http_request=false;
//開始初始化XMLHttpRequest對象
if(window.XMLHttpRequest){//Mozilla瀏覽器
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){//設置MIME類別
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){//IE瀏覽器
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){//異常，創(chuàng)建對象實例失敗
window.alert("創(chuàng)建XMLHttp對象失敗！");
return false;
}
http_request.onreadystatechange=processrequest;
//確定發(fā)送請求方式，URL，及是否同步執(zhí)行下段代碼
http_request.open("GET",url,true);
http_request.send(null);
}
//處理返回信息的函數(shù)
function processrequest(){
if(http_request.readyState==4){//判斷對象狀態(tài)
if(http_request.status==200){//信息已成功返回，開始處理信息
document.getElementById("results").style.display="none";
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{//頁面不正常
alert("您所請求的頁面不正常！");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在讀取數(shù)據(jù)...</font>";
send_request(url);
reobj=obj;
}
數(shù)據(jù)庫文件，如下:
-- phpMyAdmin SQL Dump -- version 2.8.1 -- 主機: localhost -- 服務器版本: 5.0.22 -- PHP 版本: 5.2.12 -- -- 數(shù)據(jù)庫: `demo` -- -- -------------------------------------------------------- -- -- 表的結構 `brand` -- CREATE TABLE `brand` ( `id` int(7) NOT NULL auto_increment, `sp_brand` varchar(255) default NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 AUTO_INCREMENT=19 ; -- -- 導出表中的數(shù)據(jù) `brand` -- INSERT INTO `brand` (`id`, `sp_brand`) VALUES (1, 'hello world'), (2, '你好'), (3, '恩'), (4, 'fdsafdsafdsa'), (5, 'fdsafdafdsafdas'), (6, 'fdsafdsa'), (7, 'fdsafdsafdas'), (8, '恩'), (9, '恩'), (10, '恩'), (11, '恩11'), (12, '恩'), (13, '恩'), (14, '恩'), (15, '恩'), (16, '恩'), (17, '恩'), (18, '恩18');
下面介紹這些文件的功能
ajaxpg.js:ajax無刷新核心文件,一般不要去作修改.
index.php:實現(xiàn)ajax無刷新的文件了,這里調(diào)用了ajaxpg.js文件,配置了mysql用戶密碼,要和自己本地的一致,以及顯示分頁的效果.
page.css:這是分頁的CSS樣式文件,用來美化的,就不多介紹了.
brand.sql:這是MYSQL數(shù)據(jù)庫的文件了,進行導入到MYSQL數(shù)據(jù)庫中,同樣,如果不會導入,可以參考PHPfensi.com中如何導入.sql文章即可。
例子非常的簡單大家只要按流程來操作就ok啦，希望這篇文章能幫助大家真正的實現(xiàn)php+ajax無刷新分頁。
相關文章
php截取后臺登陸密碼的代碼,很多時候黑客留了這樣的代碼，大家一定要注意下2012-05-05
本文主要給大家介紹的是php5.3引入的PHP匿名函數(shù)，也就是閉包（Closure），以及閉包的作用，非常詳細，這里推薦給有需要的小伙伴們。2016-02-02
這篇文章主要介紹了PHP使用適合閱讀的格式顯示文件大小的方法,實例分析了php實現(xiàn)數(shù)據(jù)轉(zhuǎn)換的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
這篇文章主要介紹了php 多進程編程父進程的阻塞與非阻塞,結合實例形式分析了php 多進程編程中父進程的阻塞、等待、子進程退出、非阻塞等相關操作技巧,需要的朋友可以參考下2020-02-02
PHP實現(xiàn)找出鏈表中環(huán)的入口節(jié)點
這篇文章主要介紹了PHP實現(xiàn)找出鏈表中環(huán)的入口節(jié)點,涉及php針對環(huán)形鏈表的遍歷、查找、計算等相關操作技巧,需要的朋友可以參考下2018-01-01
日常環(huán)境由無數(shù)實體組成：植物、人群、交通工具、食物……實在是太多了，光是把它們列出來都要花上幾個小時的時間。每個實體都由一組性質(zhì)和行為來定義2012-06-06
php url獲取參數(shù)，有端口等信息,后來經(jīng)腳本之家補充，經(jīng)過測試，都是可以直接使用的函數(shù)代碼。2008-12-12
本來在unix世界換行就用/n來代替，但是windows為了體現(xiàn)他的不同，就用/r/n，更有意思的是在mac中用/r。因此unix系列用 /n，windows系列用 /r/n，mac用 /r，這樣就用你寫的程序在不同的平臺上運行有著不少的麻煩2013-02-02
empty() 只檢測變量，檢測任何非變量的東西都將導致解析錯誤。換句話說，后邊的語句將不會起作用： empty(addslashes($name))2011-11-11
微信自定義菜單的創(chuàng)建/查詢/取消php示例代碼
這篇文章主要為大家詳細介紹了微信自定義菜單的創(chuàng)建/查詢/取消php示例代碼，感興趣的小伙伴們可以參考一下2016-08-08