【原创】分页高级教程：结合JQUERY做AJAX分页
本文主要结合JQUERY做无刷新分页。代码基本上和前两篇文章差不多，稍稍有所变动。本文中的翻页链接用JS编写。先上代码：
page4.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-Type" content="text/html; charset=utf-8" /><title>结合jquery做ajax分页</title><style>body{ font-size:12px; font-family:Verdana, Arial, Helvetica, sans-serif}.page A{ padding:3px 5px; float:left; border:solid #CCCCCC 1px; text-decoration:none; font-size:12px; margin-left:1px; font-family:Verdana;color:#000000;}.page A.currentpage{ color:#FF0000; border: solid red 1px;}.page A:hover{ background-color:#CCCCCC;}</style><script language="javascript" src="jquery-1.7.1.min.js"></script></head><body><? //PHP分页实例//分页尺寸$page_size=10;$conn=mysql_connect("localhost","root","root") or die(mysql_error());mysql_select_db("xinyang");//计算总行数$total_records=mysql_num_rows(mysql_query("SELECT id from product"));//总页数$total_page=ceil($total_records/$page_size); $query=mysql_query("select * from product limit 0,$page_size") or die(mysql_error());?><div class="recordlist"><ul><?while ($rs=mysql_fetch_array($query)){?> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><?}?></ul></div><div class='page'></div></body></html><script language="javascript">var total_page=<?=$total_page?>;var url="page5.php?page";//当前链接,格式如下，例如：?aa=1&page ,somepage.php?action=1&cat=1&page$().ready(function(){ $(".page").html(pagination(1)) page_link();})function page_link(){ $(".page A").click(function(){ var page=parseInt($(this).attr("page")) $(".recordlist").load($(this).attr("href"),"",function(){$(".page").html(pagination(page));page_link();}) return false; })}function pagination(current_page){ //翻页链接开始 current_page = current_page<=0 ? 1 : current_page; current_page = current_page>total_page?total_page:current_page; var page_link=""; if (total_page>1) { page_link="<a>一共"+total_page+"页</a>"; page_link+="<a>当前第"+current_page+"页</a>"; page_link+="<a href="+url+"=1 page=1>首页</a>"; if (current_page>1){ //页码大于1的时候，显示上一页翻页链接 var pre_page=current_page-1; page_link+="<a href='"+url+"="+pre_page+"' page="+pre_page+"><<</a>"; } //翻页列表 //步进分页，翻页列表的数字始终只显示9个或者自定义的个数,本例定义只显示9个,当前页左右各显示4个页码 if (total_page>9) { if (current_page>4) { var from=current_page-4; var to=current_page+4; if (to>total_page) { var from=total_page-8; var to=total_page; } } else { var from=1; var to=9; } } else { var from=1; var to=total_page; } for (var i=from;i<=to;i++) { if (i==current_page) { //高亮当前页页码 page_link+="<a href='"+url+"="+i+"' class='currentpage' page="+i+">"+i+"</a>"; } else { page_link+="<a href='"+url+"="+i+"' page="+i+" page="+i+">"+i+"</a>"; } } //页码小于总页数的时候显示下一页翻页链接 var next_page=current_page+1; if(next_page<total_page) { page_link+="<a href='"+url+"="+next_page+"' page="+next_page+">>></a>"; } page_link+="<a href='"+url+"="+total_page+"' page="+total_page+">最后一页</a>"; } return page_link;}</script>page5.php
<? $page=$_GET["page"]+0;$page= $page<=0 ? 1 : $page; //分页尺寸$page_size=10;$conn=mysql_connect("localhost","root","root") or die(mysql_error());mysql_select_db("xinyang");$offset=($page-1)*$page_size;$query=mysql_query("select * from product limit $offset,$page_size") or die(mysql_error());?> <ul><?while ($rs=mysql_fetch_array($query)){?> <li><?=$rs["id"]?>-<?=$rs["ename"]?></li><?}?></ul>
回复讨论(解决方案)
本文的核心部分就是JS部分的 page_link()函数，当用户点击翻页链接之后，脚本将对div.recordlist绑定一个load事件，这个主要用来加载下一页的内容。
看看jquery手册上对load事件的说明：载入远程 HTML 文件代码并插入至 DOM 中。
如果我们仅仅只这样：
$(".recordlist").load($(this).attr("href")) 这样是可以翻页，但是问题出现了，发现翻页链接不能发生变化，，，所以需要在回调函数里面，重新初始化翻页链接，因此在回调函数总加入$(".page").html(pagination(page))；这里初始化翻页之后，需要对.page A重新绑定click事件，因此在回调函数里面加上page_link().
由于是点击的的对象是.page A,点击之后，会发生跳转，因此必须终止跳转，所以必须加上return false来终止。。。
暂且说这么多，欢迎拍砖~
你将分页链接和内容做成一个模板 每次请求的时候把整个模板load这个模板就行
减少一些js操作
学习了…………
几点意见.
1 pagination 函数用意是拼接输出字符串，建议封装为模板.
2 此分页，没有考虑带上查询条件。
page5.php有什么 用吗？
好用，非常感谢
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
得物使用教程
Mar 21, 2024 pm 01:40 PM
得物APP是当前十分火爆品牌购物的软件，但是多数的用户不知道得物APP中功能如何的使用，下方会整理最详细的使用教程攻略，接下来就是小编为用户带来的得物多功能使用教程汇总，感兴趣的用户快来一起看看吧！得物使用教程【2024-03-20】得物分期购怎么使用【2024-03-20】得物优惠券怎么获得【2024-03-20】得物人工客服怎么找【2024-03-20】得物取件码怎么查看【2024-03-20】得物求购在哪里看【2024-03-20】得物vip怎么开【2024-03-20】得物怎么申请退换货
夏天，一定要试试拍摄彩虹
Jul 21, 2024 pm 05:16 PM
夏天雨后，经常能见到一种美丽且神奇的特殊天气景象——彩虹。这也是摄影中可遇而不可求的难得景象，非常出片。彩虹出现有这样几个条件：一是空气中有充足的水滴，二是太阳以较低的角度进行照射。所以下午雨过天晴后的一段时间内，是最容易看到彩虹的时候。不过彩虹的形成受天气、光线等条件的影响较大，因此一般只会持续一小段时间，而最佳观赏、拍摄时间更为短暂。那么遇到彩虹，怎样才能合理将其记录下来并拍出质感呢？1.寻找彩虹除了上面提到的条件外，彩虹通常出现在阳光照射的方向，即如果太阳由西向东照射，彩虹更有可能出现在东
photoshopcs5是什么软件？-photoshopcs5使用教程
Mar 19, 2024 am 09:04 AM
PhotoshopCS是PhotoshopCreativeSuite的缩写，由Adobe公司出品的软件，被广泛用于平面设计和图像处理，作为新手学习PS，今天就让小编为您解答一下photoshopcs5是什么软件以及photoshopcs5使用教程。一、photoshopcs5是什么软件AdobePhotoshopCS5Extended是电影、视频和多媒体领域的专业人士,使用3D和动画的图形和Web设计人员,以及工程和科学领域的专业人士的理想选择。呈现3D图像并将它合并到2D复合图像中。轻松编辑视
专家教你！华为手机截长图的正确方法
Mar 22, 2024 pm 12:21 PM
随着智能手机的不断发展，手机的功能也变得越来越强大，其中截长图功能成为了许多用户日常使用的重要功能之一。截长图可以帮助用户将一个较长的网页、对话记录或者图片一次性保存下来，方便查阅和分享。而在众多手机品牌中，华为手机也是备受用户推崇的一款品牌之一，其截长图功能也备受好评。本文将为大家介绍华为手机截长图的正确方法，以及一些专家技巧，帮助大家更好地利用华为手机的
PHP教程：如何将int类型转换为字符串
Mar 27, 2024 pm 06:03 PM
PHP教程：如何将int类型转换为字符串在PHP中，将整型数据转换为字符串是一种常见的操作。本教程将介绍如何使用PHP内置的函数将int类型转换为字符串，同时提供具体的代码示例。使用强制类型转换：在PHP中，可以使用强制类型转换的方式将整型数据转换为字符串。这种方法非常简单，只需要在整型数据前加上(string)即可将其转换为字符串。下面是一个简单的示例代码
荣耀手机鸿蒙系统升级教程
Mar 23, 2024 pm 12:45 PM
荣耀手机一直以来都备受消费者青睐，其出色的性能和稳定的系统让人爱不释手。而近日，荣耀手机发布了全新的鸿蒙系统，引起了众多用户的关注和期待。鸿蒙系统被称为“一统天下”的系统，具有更加流畅的操作体验和更高的安全性，让用户体验到全新的智能手机世界。不少用户纷纷表示想要升级自己的荣耀手机系统为鸿蒙系统，那么，接下来我们就一起来看看荣耀手机鸿蒙系统的升级教程。首先，我
PHP 与 Ajax：构建一个自动完成建议引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax构建自动完成建议引擎：服务器端脚本：处理Ajax请求并返回建议(autocomplete.php)。客户端脚本：发送Ajax请求并显示建议(autocomplete.js)。实战案例：在HTML页面中包含脚本并指定search-input元素标识符。
