php+ajax實現無刷新數據分頁例子
無刷新功能我們用到很多很多的,下面我就來給各位介紹一個實例,就是實現php+ajax實現無刷新數據分頁了,例子非常的簡單大家只要按流程來操作就可以了哦.
index.php 文件代碼如下:
<?php
header("Content-type: text/html;charset=GBK");/pic/div>
?>
<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; /pic/div>
$num=3; /pic/div>
$db=mysql_connect("localhost","root","123456"); /pic/div>
mysql_select_db("demo",$db) or die("數據庫鏈接錯誤"); /pic/div>
mysql_query("set names gbk");
/*
首先咱們要獲取數據庫中到底有多少數據，才能判斷具體要分多少頁，具體的公式就是
總數據庫除以每頁顯示的條數，有余進一。
也就是說10/3=3.3333=4 有余數就要進一。
*/
$result=mysql_query("select * from brand");
$total=mysql_num_rows($result); /pic/div>
$url='test.php';/pic/div>
/pic/div>
$pagenum=ceil($total/$num);/pic/div>
$page=min($pagenum,$page);/pic/div>
$prepg=$page-1;/pic/div>
$nextpg=($page==$pagenum ? 0 : $page+1);/pic/div>
$offset=($page-1)*$num; /pic/div>
$pagenav="<ul>";
/pic/div>
$pagenav.="<li>顯示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 條記錄</li><li>共 $total 條記錄 </li>";
/pic/div>
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>";
/pic/div>
If($page>$pagenum){
Echo "Error : Can Not Found The page ".$page;
Exit; /pic/div>
}
?></div><div id="results">
<?php
echo $pagenav;/pic/div>
?>
</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文件如下:
/pic/div>
var http_request=false;
function send_request(url){/pic/div>
http_request=false;
/pic/div>
if(window.XMLHttpRequest){/pic/div>
http_request=new XMLHttpRequest();
if(http_request.overrideMimeType){/pic/div>
http_request.overrideMimeType("text/xml");
}
}
else if(window.ActiveXObject){/pic/div>
try{
http_request=new ActiveXObject("Msxml2.XMLHttp");
}catch(e){
try{
http_request=new ActiveXobject("Microsoft.XMLHttp");
}catch(e){}
}
}
if(!http_request){/pic/div>
window.alert("創建XMLHttp對象失敗！");
return false;
}
http_request.onreadystatechange=processrequest;
/pic/div>
http_request.open("GET",url,true);
http_request.send(null);
}
/pic/div>
<form id="ousso"><track id="ousso"><big id="ousso"></big></track></form>
function processrequest(){
if(http_request.readyState==4){/pic/div>
if(http_request.status==200){/pic/div>
document.getElementById("results").style.display="none";
document.getElementById(reobj).innerHTML=http_request.responseText;
}
else{/pic/div>
alert("您所請求的頁面不正常！");
}
}
}
function dopage(obj,url){
document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在讀取數據...</font>";
send_request(url);
reobj=obj;
}
數據庫文件如下:
-- phpMyAdmin SQL Dump
-- version 2.8.1
-- /pic/div>
--
-- 主機: 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');
下面介紹這些文件的功能
ajaxpg.js:ajax無刷新核心文件,一般不要去作修改.
index.php:實現ajax無刷新的文件了,這里調用了ajaxpg.js文件,配置了mysql用戶密碼,要和自己本地的一致,以及顯示分頁的效果.
page.css:這是分頁的CSS樣式文件,用來美化的,就不多介紹了.
brand.sql:這是MYSQL數據庫的文件了,進行導入到MYSQL數據庫中,同樣,如果不會導入,可以參考PHPfensi.com中如何導入.sql文章即可.
【php+ajax實現無刷新數據分頁例子】相關文章：
php+ajax實現無刷新的新聞留言系統01-10
html無刷新分頁前端代碼03-14
如何實現bootstrap jquery dataTable異步ajax刷新表格數據02-01
一個PHP+MSSQL分頁的例子02-23
基于PHP+Ajax實現表單驗證的詳解01-01
PHP如何使用curl實現數據抓取02-05
cakephp的分頁排序12-09
word怎樣自動分頁02-20
php分頁類代碼10-03