【原创】分页高级教程：结合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 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7333
9
1627
14
1351
46
1262
25
1209
29
Dewu 사용법 튜토리얼
Mar 21, 2024 pm 01:40 PM
Dewu APP는 현재 매우 인기 있는 브랜드 쇼핑 소프트웨어이지만 대부분의 사용자는 Dewu APP의 기능을 사용하는 방법을 모릅니다. 다음으로 편집기는 Dewuduo를 사용자에게 제공합니다. 관심 있는 사용자는 와서 살펴볼 수 있습니다! Dewu 이용방법 튜토리얼 [2024-03-20] Dewu 할부구매 이용방법 [2024-03-20] Dewu 쿠폰 받는 방법 [2024-03-20] Dewu 매뉴얼 고객센터 찾는 방법 [2024-03- 20] 듀우 픽업 코드 확인 방법 [2024-03-20] 듀우 구매처 찾기 [2024-03-20] 듀우 VIP 개설 방법 [2024-03-20] 듀우 반품, 교환 신청 방법
WeChat에서 결제 소리를 끄는 방법에 대한 튜토리얼
Mar 26, 2024 am 08:30 AM
1. 먼저 위챗을 엽니다. 2. 오른쪽 상단의 [+]를 클릭하세요. 3. QR코드를 클릭하시면 결제가 진행됩니다. 4. 오른쪽 상단에 있는 세 개의 작은 점을 클릭하세요. 5. 결제도착 음성알림을 클릭하시면 종료됩니다.
photoshopcs5는 어떤 소프트웨어인가요? -photoshopcs5 사용법 튜토리얼
Mar 19, 2024 am 09:04 AM
PhotoshopCS는 Photoshop Creative Suite의 약자로 Adobe에서 제작한 소프트웨어입니다. 그래픽 디자인 및 이미지 처리에 널리 사용됩니다. PS를 처음 배우는 사용자로서 오늘은 photoshopcs5가 무엇인지, photoshopcs5를 사용하는 방법에 대해 설명하겠습니다. . 1. Photoshop CS5는 어떤 소프트웨어입니까? Adobe Photoshop CS5 Extended는 영화, 비디오 및 멀티미디어 분야의 전문가, 3D 및 애니메이션을 사용하는 그래픽 및 웹 디자이너, 엔지니어링 및 과학 분야의 전문가에게 이상적입니다. 3D 이미지를 렌더링하고 이를 2D 합성 이미지로 병합합니다. 쉽게 비디오 편집
전문가가 가르쳐드립니다! Huawei 휴대폰에서 긴 사진을 자르는 올바른 방법
Mar 22, 2024 pm 12:21 PM
스마트폰의 지속적인 발전과 함께 휴대폰의 기능은 점점 더 강력해졌고, 그 중 장사진 촬영 기능은 많은 사용자들이 일상생활에서 사용하는 중요한 기능 중 하나로 자리 잡았다. 긴 스크린샷은 사용자가 쉽게 보고 공유할 수 있도록 긴 웹페이지, 대화 기록, 사진을 한 번에 저장하는 데 도움이 됩니다. 많은 휴대폰 브랜드 중에서 Huawei 휴대폰은 사용자들로부터 높은 평가를 받는 브랜드 중 하나이며, 긴 사진을 자르는 기능도 높은 평가를 받고 있습니다. 이 기사에서는 Huawei 휴대폰으로 장사진을 찍는 올바른 방법과 Huawei 휴대폰을 더 잘 활용하는 데 도움이 되는 몇 가지 전문가 팁을 소개합니다.
여름에는 꼭 무지개를 찍어보세요
Jul 21, 2024 pm 05:16 PM
여름에 비가 내린 후에는 아름답고 마법 같은 특별한 날씨 장면인 무지개를 자주 볼 수 있습니다. 이 역시 사진에서 볼 수 있는 보기 드문 장면으로, 매우 포토제닉하다. 무지개가 나타나는 데에는 몇 가지 조건이 있습니다. 첫째, 공기 중에 충분한 물방울이 있고, 둘째, 태양이 낮은 각도로 빛납니다. 따라서 비가 그친 후 오후에 무지개를 보는 것이 가장 쉽습니다. 그러나 무지개의 형성은 날씨, 빛, 기타 조건의 영향을 크게 받기 때문에 일반적으로 짧은 시간 동안만 지속되며, 가장 잘 볼 수 있고 촬영할 수 있는 시간은 더욱 짧습니다. 그러면 무지개를 만났을 때 어떻게 제대로 기록하고 고품질로 사진을 찍을 수 있습니까? 1. 무지개를 찾아보세요. 위에서 언급한 조건 외에도 무지개는 대개 햇빛 방향으로 나타납니다. 즉, 태양이 서쪽에서 동쪽으로 빛날 경우 무지개가 동쪽에서 나타날 확률이 높습니다.
PHP 튜토리얼: int 유형을 문자열로 변환하는 방법
Mar 27, 2024 pm 06:03 PM
PHP 튜토리얼: Int 유형을 문자열로 변환하는 방법 PHP에서는 정수 데이터를 문자열로 변환하는 것이 일반적인 작업입니다. 이 튜토리얼에서는 특정 코드 예제를 제공하면서 PHP의 내장 함수를 사용하여 int 유형을 문자열로 변환하는 방법을 소개합니다. 캐스트 사용: PHP에서는 캐스트를 사용하여 정수 데이터를 문자열로 변환할 수 있습니다. 이 방법은 매우 간단합니다. 정수 데이터 앞에 (문자열)을 추가하면 문자열로 변환됩니다. 아래는 간단한 샘플 코드입니다.
ce 수정자 사용에 대한 튜토리얼? -ce 수정자의 값을 변경하는 방법은 무엇입니까?
Mar 18, 2024 pm 12:52 PM
CE 수정자는 플레이어가 돈, 경험치 등 게임의 일부 값을 수정하여 게임을 더 쉽고 재미있게 만드는 데 도움이 되는 매우 실용적인 게임 수정 도구입니다. CE(CheatEngine)는 매우 인기 있는 게임 보조 도구입니다. 오늘은 ce 수정자 사용법에 대한 튜토리얼을 알려드리겠습니다. ce 수정자 값을 변경하는 방법! 1. CE 수정자 사용 튜토리얼 먼저 CE 수정자를 다운로드하여 설치하세요. 다운로드가 완료되면 임의의 디렉터리에 압축을 풀어주세요. 두 번째 단계는 CE 수정자를 숨기고 숨기는 것입니다. 세 번째 단계는 게임에 들어간 후 아래와 같이 CE 왼쪽 상단에 있는 작은 컴퓨터를 엽니다. CE 수정자 값은 매우 유용한 오픈 소스입니다.
Honor 휴대폰 Hongmeng 시스템 업그레이드 튜토리얼
Mar 23, 2024 pm 12:45 PM
Honor 휴대폰은 뛰어난 성능과 안정적인 시스템으로 인해 항상 소비자들의 선호를 받아왔습니다. 최근 Honor 휴대폰은 새로운 Hongmeng 시스템을 출시하여 많은 사용자의 관심과 기대를 불러일으켰습니다. 홍멍(Hongmeng) 시스템은 '세계를 통합하는' 시스템으로 알려져 있으며, 더욱 원활한 작동 경험과 높은 보안성을 갖추고 있어 사용자가 스마트폰의 새로운 세계를 경험할 수 있습니다. 많은 사용자들이 Honor 휴대폰 시스템을 Hongmeng 시스템으로 업그레이드하고 싶다고 표현했습니다. 이제 Honor 휴대폰의 Hongmeng 시스템 업그레이드 튜토리얼을 살펴보겠습니다. 첫째로, 나는
