php+ajax實(shí)現(xiàn)無刷新數(shù)據(jù)分頁(yè)例子

2024-05-04 23:06:59

字體：大中小

供稿：網(wǎng)友

無刷新功能我們用到很多很多的,下面我就來給各位介紹一個(gè)實(shí)例,就是實(shí)現(xiàn)php+ajax實(shí)現(xiàn)無刷新數(shù)據(jù)分頁(yè)了,例子非常的簡(jiǎn)單大家只要按流程來操作就可以了哦.

index.php 文件代碼如下:

<?php

header("Content-type: text/html;charset=GBK");//輸出編碼,避免中文亂碼

?>

<html>

<head>

<title>ajax分頁(yè)演示</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，那么頁(yè)數(shù)就是1。

$num=3;  //每頁(yè)顯示10條數(shù)據(jù)

$db=mysql_connect("localhost","root","123456");  //創(chuàng)建數(shù)據(jù)庫(kù)連接

mysql_select_db("demo",$db) or die("數(shù)據(jù)庫(kù)鏈接錯(cuò)誤");  //選擇要操作的數(shù)據(jù)庫(kù)

mysql_query("set names gbk");

/*

首先咱們要獲取數(shù)據(jù)庫(kù)中到底有多少數(shù)據(jù)，才能判斷具體要分多少頁(yè)，具體的公式就是

總數(shù)據(jù)庫(kù)除以每頁(yè)顯示的條數(shù)，有余進(jìn)一。

也就是說10/3=3.3333=4 有余數(shù)就要進(jìn)一。

*/

$result=mysql_query("select * from brand");

$total=mysql_num_rows($result); //查詢所有的數(shù)據(jù)

$url='test.php';//設(shè)置ajax提交頁(yè)面地址的URL，這里設(shè)置成test.php通過ajax把參數(shù)傳遞給test.php再把處理過的內(nèi)容賦值到本頁(yè)的div id=result。

//頁(yè)碼計(jì)算

$pagenum=ceil($total/$num);//獲得總頁(yè)數(shù),也是最后一頁(yè)

$page=min($pagenum,$page);//獲得首頁(yè)

$prepg=$page-1;//上一頁(yè)

$nextpg=($page==$pagenum ? 0 : $page+1);//下一頁(yè)

$offset=($page-1)*$num; //獲取limit的第一個(gè)參數(shù)的值，假如第一頁(yè)則為(1-1)*10=0,第二頁(yè)為(2-1)*10=10。

$pagenav="<ul>";

//開始分頁(yè)導(dǎo)航條代碼：

$pagenav.="<li>顯示第 <B>".($total?($offset+1):0)."</B>-<B>".min($offset+10,$total)."</B> 條記錄</li><li>共 $total 條記錄 </li>";

//如果只有一頁(yè)則跳出函數(shù)：

if($pagenum<=1) return false;

$pagenav.="<li> <a href=javascript：dopage('result','$url?page=1');>首頁(yè)</a></li> ";

if($prepg) $pagenav.="<li> <a href=javascript：dopage('result','$url?page=$prepg');>前頁(yè)</a></li> "; else $pagenav.=" <li>前頁(yè)</li> ";

if($nextpg) $pagenav.="<li><a href=javascript：dopage('result','$url?page=$nextpg');>后頁(yè)</a> </li>"; else $pagenav.=" <li>后頁(yè)</li> ";

$pagenav.="<li> <a href=javascript：dopage('result','$url?page=$pagenum');>尾頁(yè)</a></li> ";

$pagenav.="<li>第 $page 頁(yè)</li><li>共 $pagenum 頁(yè)</li></ul>";

//假如傳入的頁(yè)數(shù)參數(shù)大于總頁(yè)數(shù)，則顯示錯(cuò)誤信息

If($page>$pagenum){

Echo "Error : Can Not Found The page ".$page;

Exit;  //開源軟件:Vevb.com

}

?></div><div id="results">

<?php

  echo $pagenav;//輸出分頁(yè)導(dǎo)航

?>

</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ā)送請(qǐng)求的函數(shù)

http_request=false;

//開始初始化XMLHttpRequest對(duì)象

if(window.XMLHttpRequest){//Mozilla瀏覽器

http_request=new XMLHttpRequest();

if(http_request.overrideMimeType){//設(shè)置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)建對(duì)象實(shí)例失敗

window.alert("創(chuàng)建XMLHttp對(duì)象失??！");

return false;

}

http_request.onreadystatechange=processrequest;

//確定發(fā)送請(qǐng)求方式，URL，及是否同步執(zhí)行下段代碼

http_request.open("GET",url,true);

http_request.send(null);

  }

  //處理返回信息的函數(shù)

  function processrequest(){

if(http_request.readyState==4){//判斷對(duì)象狀態(tài)

  if(http_request.status==200){//信息已成功返回，開始處理信息

document.getElementById("results").style.display="none";

document.getElementById(reobj).innerHTML=http_request.responseText;

}

else{//頁(yè)面不正常

alert("您所請(qǐng)求的頁(yè)面不正常！");

}

}

  }

  function dopage(obj,url){

document.getElementById(obj).innerHTML="<font color='green' font-size='12'>正在讀取數(shù)據(jù)...</font>";

send_request(url);

reobj=obj;

}

數(shù)據(jù)庫(kù)文件如下:

-- phpMyAdmin SQL Dump

-- version 2.8.1

-- http://www.phpmyadmin.net

--

-- 主機(jī): localhost

-- 生成日期: 2010 年 01 月 22 日 14:41

-- 服務(wù)器版本: 5.0.22

-- PHP 版本: 5.2.12

--

-- 數(shù)據(jù)庫(kù): `demo`

--

-- --------------------------------------------------------

--

-- 表的結(jié)構(gòu) `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 ;

--

-- 導(dǎo)出表中的數(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');