php+ajax實現無刷新數據分頁的辦法

2024-05-04 23:40:01

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了php+ajax實現無刷新分頁的方法,詳細講述了數據庫的創建、Ajax文件的實現及PHP調用方法,需要的朋友可以參考下

本文實例講述了php+ajax實現無刷新分頁的方法。分享給大家供大家參考。具體實現方法如下：

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，那么頁數就是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='test.php';//設置ajax提交頁面地址的URL，這里設置成test.php通過ajax把參數傳遞給test.php再把處理過的內容賦值到本頁的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>".min($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; //開源軟件: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){//初始化，指定處理函數，發送請求的函數

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){//異常，創建對象實例失敗

window.alert("創建XMLHttp對象失敗！");

return false;

}

http_request.onreadystatechange=processrequest;

//確定發送請求方式，URL，及是否同步執行下段代碼

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

http_request.send(null);

}

//處理返回信息的函數

function processrequest(){

if(http_request.readyState==4){//判斷對象狀態

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'>正在讀取數據...</font>";

send_request(url);

reobj=obj;

}

數據庫文件，如下:

-- phpMyAdmin SQL Dump

-- version 2.8.1

-- 主機: localhost

-- 服務器版本: 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');