ajax分頁練習
阿新 • • 發佈：2018-02-16
int ots rip limit amp set utf-8 jquery plist
用ajax方式實現數據的分頁顯示，
數據庫為chinastates
AreaCode 地區代號，AreaName 地區名稱，ParentAreaCode父級代號
網頁一共三頁
1.主頁
<!--這裏是a-fenye.php，是分頁顯示的主頁，用來顯示數據內容--> <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <script src="../js/jquery-3.3.1.min.js"></script><!--引用jQuery--> <script src="../js/bootstrap.min.js"></script><!--引用bootstrap包--> <link href="../css/bootstrap.min.css" rel="stylesheet" type="text/css"><!--引用bootstrap包--> </head> <body> <!--搜索欄開始--> <div style="padding: 100px 100px 10px;"><form class="bs-example bs-example-form" role="form"> <div class="row"> <div class="col-lg-6"> <div class="input-group"> <input type="text" class="form-control" id="sstj"> <span class="input-group-btn"> <button class="btn btn-default" type="button" id="ss">搜索</button> </span> </div><!-- /input-group --> </div><!-- /.col-lg-6 --> </div><!-- /.row --> </form> </div> <!--搜索欄結束--> <!--數據列表開始--> <table class="table table-bordered"> <caption>中國地區</caption> <thead> <tr> <th>地區代號</th> <th>地區名稱</th> <th>父級代號</th> </tr> </thead> <tbody id="nr"><!--數據內容載體--> </tbody> </table> <!--數據列表結束--> <!--索引欄開始--> <ul class="pagination" style="width:400px; height:50px; margin-left:500px" id="plist"><!--索引欄的載體--> <!-- <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> <li class="disabled"><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">»</a></li> 以上是引入的索引欄格式 --> </ul> <!--索引欄結束--> </body> <script type="text/javascript"> var pcount = 13; //pcount表示每一頁顯示的數據條數 var page = 1; //表示當前頁數 jiaZai(); //執行方法jiaZai()和jzList() jzList(); /* *用來加載網頁裏的數據內容 */ function jiaZai(){ var sstj = $("#sstj").val(); //sstj代表用戶輸入的查詢條件 $.ajax({ url:"a-fenye-chuli.php", //處理頁面為a-fenye-chuli.php data:{page:page,pcount:pcount,sstj:sstj}, //傳輸的數據為當前頁數，每頁是數據條數，查詢條件 type:"post", //提交方式為post dataType:"JSON", //返回的數據格式是JSON格式 success: function(e){ //回調函數用於顯示刷新內容 var str = ""; //空字符串str for(var k in e){ //遍歷JSON，把JSON內的數據以表格形式顯示，並累加str str += "<tr><td>"+e[k].AreaCode+"</td><td>"+e[k].AreaName+"</td><td>"+e[k].ParentAreaCode+"</td></tr>"; } $("#nr").html(str); //將最終得到的str作為HTML代碼賦予數據內容的載體中 } }) } /* *用來加載索引列 */ function jzList(){ var str = ""; //空字符串str var zdy = zuiDaYe(); //zdy代表最大頁數 str += "<li id=‘qian‘><a>«</a></li>"; //向前的箭頭 for(var i=page-2;i<page;i++){ //表示當前頁之前的兩頁 if(i>0) str += "<li class=‘ plist‘><a>"+i+"</a></li>" ; } str += "<li class=‘active plist‘><a>"+page+"</a></li>"; //代表當前頁 for(var i=page;i<page+2;i++){ //代表當前頁之後兩頁 var p = i+1; if(p<=zdy) str += "<li class=‘ plist‘><a>"+p+"</a></li>"; } str += "<li id=‘hou‘><a>»</a></li>"; //代表向後的箭頭 $("#plist").html(str); //最終累加的str作為HTML代碼賦予到索引欄中 jiaShiJian(); //給每一個索引添加事件 } /* *給每一個索引添加事件 */ function jiaShiJian(){ var zdy = zuiDaYe(); //zdy代表最大頁數 $("#qian").click(function(){ //向前的箭頭添加的點擊事件為當前頁數減一並重新加載數據內容和索引欄 if(page>1){ page--; jiaZai(); jzList(); }else{ alert("已經是第一頁！"); //如果當前頁是第一頁則彈出提示 } }) $("#hou").click(function(){ //向後的箭頭添加的點擊事件為當前頁數加一並重新加載數據內容和索引欄 if(page<zdy){ page++; jiaZai(); jzList(); }else{ alert("已經是最後一頁！"); //如果當前頁是最後一頁則彈出提示 } }) $(".plist").click(function(){ //點擊索引事件為當前頁等於點擊的索引值然後重新加載數據內容和索引欄 page = parseInt($(this).text()); jiaZai(); jzList(); }) } $("#ss").click(function(){ //點擊搜索按鈕的事件，當前頁歸一並重新加載數據和索引欄 page = 1; jiaZai(); jzList(); }) /* *用來取最大頁數 *@return 返回最大頁數 */ function zuiDaYe(){ var zts; //zts代表數據總條數 var sstj = $("#sstj").val(); //sstj代表用戶輸入的查詢條件 $.ajax({ type:"post", //數據傳輸方式為post data:{sstj:sstj}, //傳輸的數據為用戶輸入的查詢條件 dataType:"text", //傳回的數據格式為text url:"a-fenye-zts.php", //處理頁面為a-fenye-zts.php async:false, //非異步刷新 success: function(e){ //回調函數取出總條數值 zts = parseInt(e); } }) //向上取整總條數除以每頁數據條數的值並返回 return Math.ceil(zts/pcount); } </script> </html>
2.處理頁面一
<?php //這裏是a-fenye-chuli.php，是主頁a-fenye.php中加載數據內容方法裏ajax的處理頁面 require_once("../DBDA.class.php"); $db = new DBDA(); $page = $_POST["page"]; //取出傳輸過來的值 $pcount = $_POST["pcount"]; $sstj = $_POST["sstj"]; $tj = " 1=1 "; //設一個恒成立的條件tj if(!empty($sstj)){ //判斷傳輸過來的查詢條件sstj是否非空 $tj = " areaname like ‘%{$sstj}%‘ "; //非空則把tj修改為SQL語句模糊查詢的條件的書寫格式 } $tg = ($page-1)*$pcount; //tg表示跳過的數據條數，計算方法為當前頁減一再乘以每頁的數據條數 $sql = "select * from chinastates where {$tj} limit {$tg},{$pcount}"; //完成SQL語句，這是一個分頁查詢語句 echo $db->jsonquery($sql); //用返回JSON數據的方法執行SQL語句並輸出返回
3.處理頁面二
<?php //這裏是a-fenye-zts.php，是主頁a-fenye.php中zuiDaYe()方法中ajax的處理頁面 require_once("../DBDA.class.php"); $db = new DBDA(); $sstj = $_POST["sstj"]; //用sstj接收查詢條件 $tj = " 1=1 "; //tj是一個恒成立的條件 if(!empty($sstj)){ //判斷sstj是否非空 $tj = " areaname like ‘%{$sstj}%‘ "; //非空則把tj修改為SQL語句模糊查詢的條件的書寫格式 } $sql = "select count(*) from chinastates where {$tj}"; //完成SQL語句，這是一個數據條數查詢 echo $db->strquery($sql); //返回總條數
主要思路是控制page來實現分頁和跳轉效果，通過對page的操作還可以添加其他的功能，如跳轉到具體頁。
ajax分頁練習