PHP和jQuery實現簡單的分頁

最後更新：2018-03-21 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

本文主要和大家分享PHP和jQuery實現簡單的分頁，希望能協助到大家。

HTML 頁面：

<!DOCTYPE html><html><head><title>jquery ajax分頁</title></head><body><p><p>下面是擷取的內容</p><ul id="data"><!-- 這裡是顯示的內容 --></ul></p><p id="page"><a href="javascript:void(0)" name="first">首頁</a><a href="javascript:void(0)" name="up">上一頁</a><a href="javascript:void(0)" name="next">下一頁</a><a href="javascript:void(0)" name="last">尾頁</a></p><p><input type="text" id="p" value="1"><!-- 當前頁 --><input type="text" id="pageLast" value=""><!-- 總頁數 --></p></body></html><script type="text/javascript" src="http://code.jquery.com/jquery-1.12.4.js"></script><!-- 偷懶+方便用了線上的jquery檔案 --><script type="text/javascript">$(function(){//頁面載入顯示當前頁的內容var p = $("#p").val();//擷取當前頁ajax(p); //調用ajax方法})$('#page>a').click(function(){//頁碼的點擊事件var name = $(this);//擷取pagenow當前頁和總頁數pagelast，記得使用parseInt，轉換整型var pn = parseInt($("#p").val());var pl = parseInt($("#pageLast").val());switch(name.attr('name')){ //根據a標籤內的name屬性判斷跳轉方向case "first": p = 1;break;case "up": p = pn-1;break;case "next": p = pn+1;break;case "last": p = pl;break;}if (p<1 || p>pl) {return;}else{ajax(p);}})function ajax(p){//ajax方法，與後台互動$.ajax({type:"post",datatype:"json",url:"tb.php",data:{p:p},success:function(msg){$('#data').empty();aa = $.parseJSON(msg); //轉換json格式（在傳回值有小的問題的時候可以使用）pageNow = parseInt(aa[0].page);pn = $("#p").val(pageNow);//賦值當前頁pageLast = parseInt(aa[0].lastpage);pl = $("#pageLast").val(pageLast);//賦值總頁數$.each(aa,function(k,v){//標籤內追加內容$('#data').append('<li>id為：'+v.tb_id+';名稱為：'+v.name+'</li>')})}})}</script>

後台PHP代碼：

<?php$pdo = new PDO("mysql:host=127.0.0.1;dbname=school",'root','root');$sql = "select * from tb";$count = $pdo->query($sql)->rowCount();//當前資料總條數$p = isset($_POST['p'])?$_POST['p']:1;//頁碼$dataPerpage = 5;//每頁顯示條數$offset = ($p-1)*$dataPerpage;//位移量$last = ceil($count/$dataPerpage);//總頁數$sql2 = "select * from tb limit $offset,$dataPerpage";$data = $pdo->query($sql2)->fetchAll(PDO::FETCH_ASSOC);//把當前頁和總頁數發送給前台$data[0]['page'] = $p;$data[0]['lastpage'] = $last;echo json_encode($data);

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More