當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Ajax 实现无刷新分页

發(fā)布時間：2024/8/26 编程问答 30 豆豆

生活随笔收集整理的這篇文章主要介紹了 Ajax 实现无刷新分页小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

用這種ajax做分頁的方法比較簡單，把代碼直接復制就可以，然后根據(jù)實際更改一下里面的參數(shù)。

1.設置分頁顯示顯示的樣式，顯示效果如下。

2.頁數(shù)顯示代碼容器，把這段代碼放在</table>后面。

<center> <ul class="pagination b3" id="fy_list"> </ul> <input type="hidden" value="1" id="fy_n" /> </center>

3.ajax實現(xiàn)分頁的代碼

4.如果要加上關鍵字查詢功能，現(xiàn)在表格上面加上關鍵字輸入框。

關鍵字：<input id="guanjianzi" type="text" name="key" />

然后在js代碼中多寫一步，其實就是重復顯示效果的js代碼，里面加上條件。下面是分頁顯示+關鍵字查詢所有的代碼。

//ajax分頁開始 $(document).ready(function(e) {JiaZai();var zys = 0; //頁面加載數(shù)據(jù) }) function JiaZai(){ var n = $("#fy_n").val();//頁數(shù)顯示框里面顯示的頁數(shù)$.ajax({url:"shipinguanlichuli.php",data:{n:n,gjz:""},//n是顯示的頁數(shù)。gjz是表格顯示中有關鍵字查詢，這里gjz傳一個空值，意思是沒有查詢條件，查詢所有的。type:"POST",dataType:"JSON",success: function(data){ var s =""; for(var i in data){s+="<tr><td><input type='checkbox' class='qx' value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('確定刪除嗎？')\">刪除</a></td></tr>";//拼接表格顯示內(nèi)容}$("#a22").html(s);//把拼接好的字符串放到要顯示的div里面。 }});//獲取分頁數(shù)(列表)$.ajax({url:"zyschuli3.php",type:"POST",dataType:"TEXT",success: function(data){ //總頁數(shù)var ys = Math.ceil(data/15); zys = ys; var s = "<div><a id='fy_shang' class='b4'>上一頁</a></div>";var dangqian = $("#fy_n").val(); //當前頁數(shù) for(var i=dangqian-2;i<=dangqian+2;i++){if(i>0 && i<=ys){if(dangqian==i){s+="<div class='b4' class='active'><a class='fy_zhong b4'>"+i+"</a></div>";}else{s+="<div class='b4'><a class='fy_zhong'>"+i+"</a></div>"}}}s += "<div><a id='fy_xia' class='b4'>下一頁</a></div>";$("#fy_list").html(s);//給分頁列表加事件JiaShiJian();}}) $("#guanjianzi").keyup(function(){var gjz = $(this).val();var n = $("#fy_n").val();$.ajax({url:"shipinguanlichuli.php",data:{n:n,gjz:gjz},type:"POST",dataType:"JSON",success: function(data){ var s =""; for(var i in data){s+="<tr><td><input type='checkbox' class='qx' value='"+data[i].id+"' name='sc[]' /></td><td class='hidden-xs'>"+data[i].id+"</td><td>"+data[i].name+"</td><td class='hidden-xs'>"+data[i].details+"</td><td class='hidden-xs'>"+data[i].wprice+"</td><td class='hidden-xs'>"+data[i].dprice+"</td><td class='hidden-xs'>"+data[i].class+"</td><td><a href='xiugai.php?c="+data[i].id+"'>修改</a></td><td><a href='shanchuchuli.php?c="+data[i].id+"' οnclick=\"return confirm('確定刪除嗎？')\">刪除</a></td></tr>";}$("#a22").html(s); }});//獲取分頁數(shù)(列表)//var guanjianzi = $("#guanjianzi").val();$.ajax({url:"zyschuli3.php",data:{gjz:gjz},type:"POST",dataType:"TEXT",success: function(data){ //總頁數(shù)var ys = Math.ceil(data/15); zys = ys; var s = "<li><a id='fy_shang' class='b4'>上一頁</a></li>";var dangqian = $("#fy_n").val(); //當前頁數(shù)for(var i=dangqian-2;i<=dangqian+2;i++){if(i>0 && i<=ys){if(dangqian==i){s+="<li class='active'><a class='fy_zhong b4'>"+i+"</a></li>";}else{s+="<li><a class='fy_zhong b4'>"+i+"</a></li>"}}}s += "<li><a id='fy_xia' class='b4'>下一頁</a></li>";$("#fy_list").html(s);//給分頁列表加事件JiaShiJian();}})});}//給分頁列表加事件的方法function JiaShiJian(){$("#fy_shang").click(function(){ var n = $("#fy_n").val(); if(n>1){n--;}else{n=1;}$("#fy_n").val(n);//加載數(shù)據(jù)JiaZai();})$("#fy_xia").click(function(){var n = $("#fy_n").val(); if(n<zys){n++;}else{n=zys;}$("#fy_n").val(n);//加載數(shù)據(jù)JiaZai();})$(".fy_zhong").click(function(){var n = $(this).text();$("#fy_n").val(n);//加載數(shù)據(jù)JiaZai();})} </script>

5.處理頁面1 ?shipinguanlichuli.php

<?php include("./DBDA.class.php"); $db = new DBDA(); $n = $_POST["n"];//獲取頁數(shù)顯示框里面的值 $tg = ($n-1)*15;//每頁顯示15條數(shù)據(jù)，這里顯示的就是當前頁的15條數(shù)據(jù)。 $tj1 = " 1=1 ";//默認條件是個恒成立的，如果沒有其他條件就是查詢所有的。 if(!empty($_POST["gjz"]))//獲取提交的關鍵字 {$gjz = $_POST["gjz"];$tj1 = " name like '%{$gjz}%' or details like '%{$gjz}%' or dprice like '%{$gjz}%' or dprice like '%{$gjz}%' ";//拼接查詢條件 } $sqlsj = "select * from product where {$tj1} limit {$tg},15 "; echo json_encode($db->GuanQuery($sqlsj));

6.處理頁面2?zyschuli3.php

<?php include("DBDA.class.php"); $db = new DBDA(); $tj1 = " 1=1 ";//默認條件是個恒成立的，如果沒有其他條件就是查詢所有的。 if(!empty($_POST["gjz"]))//獲取提交的關鍵字 {$gjz = $_POST["gjz"];$tj1 = " name like '%{$gjz}%' or details like '%{$gjz}%' or dprice like '%{$gjz}%' or dprice like '%{$gjz}%' ";//拼接查詢條件 } $sql ="select count(*) from product where {$tj1}";//查詢符合條件的數(shù)據(jù)的總條數(shù) $sj = $db->StrQuery($sql); echo $sj;

轉(zhuǎn)載于:https://www.cnblogs.com/ZDPPU/p/6862294.html

總結(jié)

以上是生活随笔為你收集整理的Ajax 实现无刷新分页的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

分页
Ajax