【原创】分页高级教程：结合JQUERY做AJAX分页-php教程-PHP中文網

首頁

後端開發

php教程

【原创】分页高级教程：结合JQUERY做AJAX分页

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 23, 2016 pm 01:56 PM

ajaxjquery分頁原創教學

本文主要结合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有什么用吗？

好用，非常感谢

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

PHP：許多網站的基礎Apr 13, 2025 am 12:07 AM

PHP成為許多網站首選技術棧的原因包括其易用性、強大社區支持和廣泛應用。 1)易於學習和使用，適合初學者。 2)擁有龐大的開發者社區，資源豐富。 3)廣泛應用於WordPress、Drupal等平台。 4)與Web服務器緊密集成，簡化開發部署。

超越炒作：評估當今PHP的角色Apr 12, 2025 am 12:17 AM

PHP在現代編程中仍然是一個強大且廣泛使用的工具，尤其在web開發領域。 1)PHP易用且與數據庫集成無縫，是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程，適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升，其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。

PHP中的弱參考是什麼？什麼時候有用？Apr 12, 2025 am 12:13 AM

在PHP中，弱引用是通過WeakReference類實現的，不會阻止垃圾回收器回收對象。弱引用適用於緩存系統和事件監聽器等場景，需注意其不能保證對象存活，且垃圾回收可能延遲。

解釋PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM

\_\_invoke方法允許對象像函數一樣被調用。 1.定義\_\_invoke方法使對象可被調用。 2.使用$obj(...)語法時，PHP會執行\_\_invoke方法。 3.適用於日誌記錄和計算器等場景，提高代碼靈活性和可讀性。

解釋PHP 8.1中的纖維以進行並發。Apr 12, 2025 am 12:05 AM

Fibers在PHP8.1中引入，提升了並發處理能力。 1)Fibers是一種輕量級的並發模型，類似於協程。 2)它們允許開發者手動控制任務的執行流，適合處理I/O密集型任務。 3)使用Fibers可以編寫更高效、響應性更強的代碼。

PHP社區：資源，支持和發展Apr 12, 2025 am 12:04 AM

PHP社區提供了豐富的資源和支持，幫助開發者成長。 1)資源包括官方文檔、教程、博客和開源項目如Laravel和Symfony。 2)支持可以通過StackOverflow、Reddit和Slack頻道獲得。 3)開發動態可以通過關注RFC了解。 4)融入社區可以通過積極參與、貢獻代碼和學習分享來實現。