php+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');

下面介绍这些文件的功能

ajaxpg.js:ajax无刷新核心文件,一般不要去作修改.

index.php:实现ajax无刷新的文件了,这里调用了ajaxpg.js文件,配置了mysql用户密码,要和自己本地的一致,以及显示分页的效果.

page.css:这是分页的CSS样式文件,用来美化的,就不多介绍了.

brand.sql:这是MYSQL数据库的文件了,进行导入到MYSQL数据库中,同样,如果不会导入,可以参考PHPfensi.com中如何导入.sql文章即可。

例子非常的简单大家只要按流程来操作就ok啦,希望这篇文章能帮助大家真正的实现php+ajax无刷新分页。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索php
Ajax无刷新分页
ajax无刷新分页、ajax实现局部刷新分页、tp框架ajax无刷新分页、php ajax无刷新分页、ajax无刷新分页 插件,以便于您获取更多的相关知识。

时间: 2024-08-04 00:47:50

php+ajax实现无刷新数据分页的办法_php技巧的相关文章

利用AJAX实现无刷新数据分页_AJAX相关

以前在使用Asp.Net的时候用过GridView这个控件,这个控件自带分页的功能,虽然很丑,但是功能还是很强大的.这里呢,给大家展示一下更加给力的方式--利用AJAX无刷新直接从服务器获取数据分页. 一.实现过程 注意:一下的内容都是在服务器内使用的. 首先要在服务器的路径下建立几个文件,比如,page1.txt,page2.txt,page3.txt. 每个文件中放入数组,如下: 复制代码 代码如下: [{user:'blue',pass:'123'},{user:'aaa',pass:'d

php+ajax实现无刷新的新闻留言系统_php技巧

本文介绍了一款无刷新的新闻留言系统,最简明易懂的一个ajax无刷新留言系统,源码中省略了接受数据验证的过程,大家可根据自己的需求进行扩展,下面进入主题. 核心源码: 1.配置文件:config.php,代码如下: <?php //数据库配置信息(用户名,密码,数据库名,表前缀等) $cfg_dbhost = "localhost"; $cfg_dbuser = "root"; $cfg_dbpwd = "root"; $cfg_dbname

php+ajax实现无刷新数据分页例子

index.php 文件如下图所示  代码如下 复制代码 <?php header("Content-type: text/html;charset=GBK");//输出编码,避免中文乱码 ?> <html> <head> <title>ajax分页演示</title> <script language="javascript" src="ajaxpg.js"></sc

利用AJAX实现无刷新数据分页

以前在使用Asp.Net的时候用过GridView这个控件,这个控件自带分页的功能,虽然很丑,但是功能还是很强大的.这里呢,给大家展示一下更加给力的方式--利用AJAX无刷新直接从服务器获取数据分页. 一.实现过程 注意:一下的内容都是在服务器内使用的. 首先要在服务器的路径下建立几个文件,比如,page1.txt,page2.txt,page3.txt. 每个文件中放入数组,如下: 复制代码 代码如下:[{user:'blue',pass:'123'},{user:'aaa',pass:'ds

ajax+php 无刷新数据调用经典实例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页

ExtJs的Grid组件虽然不管从哪一方面来讲,都称得上是很好很强大,但是总会有一些应用场景并不需要这么多功能,比如网站的留言列表,开发者只想要一个简单的<li>或<table>列表而已,这时候XTemplate就显得很有用了. 本文将讲解如何用XTemplate结合WCF与服务端交互,生成数据列表,同时加上无刷新分页功能(默认情况下ExtJs并没有为XTemplate并没有提供分页功能) 1.先做一些准备工作,写一个通用的类(改编自老张的PageData),用于WCF向ExtJs

php+ajax无刷新上传图片的实现方法_php技巧

本文实例讲述了php+ajax无刷新上传图片的实现方法.分享给大家供大家参考,具体如下: 1.引入文件 <!--图片上传begin--> <script type="text/javascript" src="/js/jquery.form.js"></script> <script type="text/javascript" src="/js/uploadImg.js">&l

jquery ajax实现无刷新数据加载代码

<html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title></title> <script> var xml_http_building_link = '请等待,正在建立

Ajax异步无刷新对局部数据更新_实用技巧

复制代码 代码如下: <asp:ScriptManager ID="smScriptManager" runat="server"></asp:ScriptManager> 复制代码 代码如下: <asp:UpdatePanel ID="upLinkmanList" UpdateMode="Conditional" runat="server"><ContentTe