要求:
獲取數據庫中大量的信息顯示在頁面上,必然要使用到分頁查詢;
若不使用Ajax,而是用其他的方法,肯定是要刷新頁面的,用戶體檢很不好,
所以最好使用Ajax的方法寫分頁查詢;
1.先來找一張數據很多的表吧!
一張簡單的表
代碼,引入jquery包:
<script src="jquery-1.11.2.min.js"></script>
寫一張表格,顯示我們的代號跟名稱:
<table class="table table-striped"> <thead> <tr> <td>代號</td> <td>名稱</td> <td>操作</td> </tr> </thead> <tbody id="td"> </tbody></table>
這些都很簡單,沒毛病!
2.設一個當前頁,定義一個變量為1(第一頁):
var page = 1; //當前頁,默認等于1
3.下面來寫第一個方法:需要用ajax,這個方法主要起查詢,且分頁的作用:
function load() { $.ajax({ url: "jiazai.php",// 顯示所有的數據不用寫data data:{page:page},//當前頁記得傳過去 type:"POST", dataType: "TEXT", success: function (data) { } }); }
4.去寫顯示數據的處理頁面;這里要考慮的是跳過多少條數據還有想要顯示多少條數據,用到limit:
<?phpinclude ("db.class.php");$db = new db();$page=$_POST["page"];//去當前頁page$num = 3;//每頁顯示幾條$tg = ($page-1)*3;//跳過幾條$sql = "select * from min limit {$tg},{$num}";//limit:兩個參數,第一個是跳過多少條,第二個是取多少條echo $db->Query($sql);
做完了第一步,來看看圖:
顯示數據實現!
好的,每頁先是三條數據已經實現了,(頁面變成這樣我用了美化網頁的Bookstrap,前面有講到)
5.顯示分頁信息,寫一個方法,先用ajax先獲取總頁數:
function loadfenye() { var s = ""; //用于接收 var xiao = 1;// 最大頁 var da = 1;// 最小頁 $.ajax({ async:false,// 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大頁數 }}); }
接下來做查詢總頁數的php頁面:
<?php//查詢總頁數include ("db.class.php");$db = new db();$sql = "select count(*) from min";$zts = $db->strquery($sql);//總條數echo ceil($zts/3);//ceil向上取整
好啦,總頁數獲取到了,回來把分頁寫完吧:
//加載分頁信息方法 function loadfenye() { var s = ""; //用于接收 var xiao = 1;// 最大頁 var da = 1;// 最小頁 $.ajax({ async:false,// 做成同步 url:"zys.php", dataType:"TEXT", success:function(data){ da = data; //最大頁數,查到的最大頁數交個默認的最大頁數 }});//加載上一頁 s += "<li><a>«</a></li>";// 加載分頁列表for(i=page-4;i<page+5;i++){ //i代表列表的頁數 if(i>=xiao && i<=da) { s += " <li><a>"+i+"</a></li>" }} // 加載下一頁 s += "<li><a>»</a></li>";$("#fenye").html(s); }
新聞熱點
疑難解答
圖片精選