代碼如下：
<!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="stylesheet" type="text/css"/> </head> <style> .header{ margin-top: 20px; } </style> <body> <p style="margin-top: 20px; margin-top: 20px;"> 關鍵字： <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 style="margin:0 auto; width:500px;"> <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
<?php require_once "./DBDA.class.php"; $db = new DBDA(); $sql = "select count(*) from chinastates"; echo $db->StrQuery($sql,0);
效果
關鍵字查詢：
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
