![php+ajax實現無重新整理資料分頁例子]( "php+ajax實現無重新整理資料分頁例子")
無重新整理功能我們用到很多很多的,下面我就來給各位介紹一個例項,就是實現php+ajax實現無重新整理資料分頁了,例子非常的簡單大家只要按流程來操作就可以了哦.
檔案程式碼如下: <?php header("Content-type: text/html;charset=GBK");//輸出編碼,避免
中文亂碼 ?> <html> <head> <title>ajax分頁演示</title> <script language="javascript" src=""></script> <link rel="stylesheet" type="text/css" href=""> </head> <body> <div id="result"> <?php $page=isset($_GET['page'])?intval($_GET['page']):1; //這句就是獲取page=18中的page的值，假如不存在page，那麼頁數就是1。 $num=3; //每頁顯示10條資料 $db=mysql_connect("localhost","root","123456"); //建立資料庫連線 mysql_select_db("demo",$db) or die("資料庫連結錯誤"); //選擇要操作的資料庫 mysql_query("set names gbk"); /* 首先咱們要獲取資料庫中到底有多少資料，才能判斷具體要分多少頁，具體的公式就是 總資料庫除以每頁顯示的條數，有餘進一。 也就是說10/3=3.3333=4 有餘數就要進一。 */ $result=mysql_query("select * from brand"); $total=mysql_num_rows($result); //查詢所有的資料 $url='';//設定ajax提交頁面地址的URL，這裡設定成通過ajax把引數傳遞給再把處理過的.內容賦值到本頁的div id=result。 //頁碼計算 $pagenum=ceil($total/$num);//獲得總頁數,也是最後一頁 $page=min($pagenum,$page);//獲得首頁 $prepg=$page-1;//上一頁 $nextpg=($page==$pagenum ? 0 : $page+1);//下一頁 $offset=($page-1)*$num; //獲取limit的第一個引數的值，假如第一頁則為(1-1)*10=0,第二頁為(2-1)*10=10。 $pagenav="<ul>"; //開始分頁導航條程式碼： $pagenav.="<li>顯示第 <B>".($total?($offset+1):0)."</B>-<B>"($offset+10,$total)."</B> 條記錄</li><li>共 $total 條記錄 </li>"; //如果只有一頁則跳出函式： 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>"; //假如傳入的頁數引數大於總頁數，則顯示錯誤資訊 If($page>$pagenum){ Echo "Error : Can Not Found The page ".$page; Exit; //開源軟體: } ?></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; }
檔案如下: // JavaScript Document var http_request=false; function send_request(url){//初始化，指定處理函式，傳送請求的函式 http_request=false; //開始初始化XMLHttpRequest物件 if(ttpRequest){//Mozilla瀏覽器 http_request=new XMLHttpRequest(); if(http_rideMimeType){//設定MIME類別 http_rideMimeType("text/xml"); } } else if(veXObject){//IE瀏覽器 try{ http_request=new ActiveXObject("ttp"); }catch(e){ try{ http_request=new ActiveXobject("ttp"); }catch(e){} } } if(!http_request){//異常，建立物件例項失敗 t("建立XMLHttp物件失敗！"); return false; } http_adystatechange=processrequest; //確定傳送請求方式，URL，及是否
同步執行下段程式碼 http_("GET",url,true); http_(null); } //處理返回資訊的函式 function processrequest(){ if(http_yState==4){//判斷物件狀態 if(http_us==200){//資訊已成功返回，開始處理資訊 lementById("results")lay="none"; lementById(reobj)rHTML=http_onseText; } else{//頁面不正常 alert("您所請求的頁面不正常！"); } } } function dopage(obj,url){ lementById(obj)rHTML="<font color='green' font-size='12'>正在讀取資料...</font>"; send_request(url); reobj=obj; }
資料庫檔案如下: -- phpMyAdmin SQL Dump -- version 2.8.1 -- -- -- 主機: localhost -- 生成日期: 2010 年 01 月 22 日 14:41 --
服務器版本: 5.0.22 -- PHP 版本: 5.2.12 -- -- 資料庫: `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 ; -- -- 匯出表中的資料 `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'); 下面介紹這些檔案的功能 :ajax無重新整理核心檔案,一般不要去作修改. :實現ajax無重新整理的檔案了,這裡呼叫了檔案,配置了mysql使用者密碼,要和自己本地的一致,以及顯示分頁的效果. :這是分頁的CSS樣式檔案,用來美化的,就不多介紹了. :這是MYSQL資料庫的檔案了,進行匯入到MYSQL資料庫中,同樣,如果不會匯入,可以參考中如何匯入文章即可.
