PHP中使用jQuery+Ajax實現分頁查詢功能

最後更新：2017-09-21 來源：互聯網

上載者：User

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

下面小編就為大家帶來一篇PHP中使用jQuery+Ajax實現分頁查詢多功能操作(樣本講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

1.首先做首頁面Ajax_pag.php

代碼如下：

<!DOCTYPE html><html>  <head>    <meta charset="UTF-8">    <title>Ajax做分頁</title>    <script src="bootstrap/js/jquery-1.11.2.min.js"></script>    <script src="Ajax_pag.js"></script>    <script src="bootstrap/js/bootstrap.min.js"></script>    <link href="bootstrap/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet" type="text/css"/>  </head>  <style>    .header{      margin-top: 20px;    }  </style>  <body>    <p >      關鍵字：      <input id="key" type="text" name="gjz"/>      <input type="button" value="查詢" id="ck" />          </p>    <table class="table table-bordered header">      <thead>        <tr>          <th>地區代號</th>          <th>地區名稱</th>          <th>父級代號</th>        </tr>      </thead>      <tbody id="list">      </tbody>    </table>    <p >      <ul class="pagination" id="fenye">      </ul>    </p>    </body> </html>

2.然後做分頁查詢JS頁面Ajax_pag.js

代碼如下：

//ajax分頁開始    var ts = 10;//每頁顯示的條數    var page = 1;//當前頁    $(document).ready(function(e) {      //頁面載入資料      Load();      //載入分頁列表      Loadlist();      $("#ck").click(function(){        //頁面載入資料    Load();    //載入分頁列表    Loadlist();      })})                //載入資料的方法    function Load(){        var gjz = $("#key").val();        $.ajax({            async:false,            url:"pagechuli.php",            data:{page:page,ts:ts,gjz:gjz},//page是顯示的頁數；ts是顯示的條數            type:"POST",            dataType:"JSON",                           success: function(data){                                               var str ="";                              for(var k in data)                  {                  str +="<tr><td>"+data[k][0]+"</td><td>"+data[k][1]+"</td><td>"+data[k][2]+"</td></tr>";                  }                  $("#list").html(str);//把拼接好的字串放到要顯示的thody裡面                                          }              })            }      //載入分頁列表          function Loadlist(){      var str ="";          //上一頁      str+="<li><a id='prev'>«</a></li>";      //載入列表      for(var i=page-4;i<page+5;i++){        //限制條件        if(i>0 && i<=zys()){        //判斷當前頁        if(i==page){            str+= "<li class='active'><a>"+i+"</a></li>";        }else{      str+= "<li><a class='item'>"+i+"</a></li>";      }    }      }      //下一頁      str+="<li><a id='next'>»</a></li>";      $("#fenye").html(str);            $("#prev").click(function(){        if(page>1){          page--;                  }        //頁面載入資料        Load();        //載入分頁列表        Loadlist();      })            $(".item").click(function(){        var p = $(this).text();//取到的是字串,轉化為整數        page = parseInt(p);        //頁面載入資料        Load();        //載入分頁列表        Loadlist();      })            $("#next").click(function(){        if(page<zys()){          page++;        }        //頁面載入資料        Load();        //載入分頁列表        Loadlist();      })          }          //總頁數  function zys(){    var zys = 0;    $.ajax({      async:false,      url:"zyschuli.php",      dataType:"TEXT",      success:function(data){        zys = Math.ceil(data/ts);      }    });    return zys;  }

3.最後做分頁查詢處理頁面pagechuli.php

代碼如下：

<?php$gjz = $_POST["gjz"];$page = $_POST["page"];//擷取頁數顯示值$ts = $_POST["ts"];//擷取每頁條數顯示值require_once "./DBDA.class.php";$db = new DBDA();$tj = " 1=1 ";if(!empty($_POST["gjz"])){  $gjz = $_POST["gjz"];  $tj = " areaname like '%{$gjz}%' or areacode like '%{$gjz}%' or parentareacode like '%{$gjz}%' ";}$tg = ($page-1)*$ts;//每頁顯示$ts條資料，這裡顯示的就是當前頁的$tg條資料。$sql = "select * from chinastates where {$tj} limit {$tg},{$ts}";echo $db->JsonQuery($sql,0)

小外掛程式：總頁數的處理頁面zyschuli.php

<?phprequire_once "./DBDA.class.php";$db = new DBDA();$sql = "select count(*) from chinastates";echo $db->StrQuery($sql,0);

效果

關鍵字查詢：

本文章原先以中文撰寫並發佈於 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