這次帶給大家ajax分頁查詢圖文詳解,ajax分頁查詢的注意事項有哪些,下面就是實戰案例,一起來看一下。
(1)先寫一個顯示資料的頁面,分頁查詢需要那幾個部分呢?
1.首先是查詢的文字方塊輸入,還有查詢按鈕,那就開始寫程式碼吧
<p> <input> //输入查询字的文本框 <input> //查询按钮,起名字是为了以后给这个按钮加事件,因为只有点击了才可以将文本框的内容进行查询 </p>
看下效果:
2.接下來就是顯示資料了,顯示資料必然要查資料庫了,就要用到ajax的方法
先將jQuery的套件引入這個顯示資料的頁面
<script src="../jquery-1.11.2.min.js"></script> //引入jQuery的包
寫想要顯示的列的內容,自然是要寫表了,寫一行,行中有單元格放想要顯示內容的字段名(這裡顯示3種資訊)
代号 | 名称 | 父级代号 |
現在還沒查看資料庫,但可以先看下顯示效果:
3.現在可以先來查資料庫了,這裡就要用到ajax了
3.1不過既然是要分頁顯示,那麼會有個預設的第一頁,可以先定個變數
var page = 1; //目前頁
#3.2然後開始寫ajax,查詢資料庫了,但這個會常用到,避免再寫很多遍,我們可以寫一個方法
function Load() { var key = $("#key").val(); //查询条件:因为会用到查询 $.ajax({ url:"fenye_chuli.php", //显示数据的处理页面 data:{page:page,key:key}, //页数和查询都要传值 type:"POST", dataType:"JSON", //这里我们用JSON的数据格式 success: function(data){ //执行完处理页面后写代码 } }); }
#3.3再寫顯示資料的處理頁面,這裡要考慮的是跳過多少條資料還有想要顯示多少條資料
<?php include("DBDA.class.php"); //调用封装好的类 $db = new DBDA(); //造新对象 $page = $_POST["page"]; //传值页数 $key = $_POST["key"]; //传值关键字<br> $num = 20; //每页想要显示的数据条数 $tiao = ($page-1)*$num; //显示的当前跳过多少条数据 //查询表中模糊查询名称是关键字,分页是跳过多少条,显示多少条数据 $sql = "select * from chinastates where areaname like '%{$key}%' limit {$tiao},{$num}"; //执行sql语句 echo $db->JSONQuery($sql); //调用的是写好的JSON数据格式的处理方式
JSON資料格式是關聯數組,所以要進行處理一下,將處理方式封裝成類別就好
在「AJAX中的dataType(資料格式)-text、json」中寫到過處理方式
#3.4處理頁面結束後,就是要寫ajax中執行完處理頁面後寫程式碼(注意:上面用的是JSON的資料格式,所以要注意欄位名稱要跟資料庫中的一樣,還有就是他是關聯數組)
success: function(data){ var str = ""; for(var k in data) {<br> //循环显示的代号、名称、父级代号 str +="<tr> <td>"+data[k].AreaCode+"</td> <td>"+data[k].AreaName+"</td> <td>"+data[k].ParentAreaCode+"</td> </tr>"; } $("#bg").html(str); //将内容放大显示这些数据的地方 }
這樣就把想要顯示的資料放到bg中了,記得這個方法呼叫一下
到此就是顯示資料了,但是這樣沒辦法實現分頁,所以還需要分頁,這裡就是要放數字了,但是也是需要遍歷的,隨意放空的就可以
<p> //显示数字或是上一页 </p>
#3.5這個也是可以寫成個方法,然後呼叫
# #要知道最大能顯示多少頁,這裡可以先定義一個預設最大數,這個最大數也可以是搜尋關鍵字時顯示的最大頁數
var maxys = 1;
找到關鍵字的值
var key = $("#key").val();
然後就是寫ajax了,查總頁數
$.ajax({ async:false, //因为这个是要同步执行的,所以值是false url:"fenye_zys.php", //处理页面 data:{key:key}, //想要传的值 type:"POST", //传值方式 dataType:"TEXT", //这里可以用TEXT字符串的方式 success: function(d){ //处理页面结束后的语句 } });
接下裡就是寫處理訊息的處理頁面了
<?php include("DBDA.class.php"); //调用封装好的类 $db = new DBDA(); $key = $_POST["key"]; //将值传过来 $num = 20; //默认显示的条数 $sql = "select count(*) from chinastates where areaname like '%{$key}%'"; //通过关键字查询总条数 $zts = $db->StrQuery($sql); echo ceil($zts/$num); //转换成整数處理頁面執行結束後,就要把查到的最大頁數交個預設的最大頁數
success: function(d){ maxys = d; //将执行结果交给定义的最大页数 }這樣之後就是要有“上一頁”“下一頁”,中間的數可以讓他每次顯示5條
str += "<span>总共:"+maxys+"页</span> "; str += "<span>上一页</span>"; //后面要用到单击事件的,在这起个名字 //循环的当前页 str += "<span>下一页</span>"; //这个也是要用点击事件的也要起名字然後再是寫循環的頁數了
for(var i=page-2;i<page>=minys && i"+i+" "; //当前页选中 } else { str += "<span>"+i+"</span> "; //显示当前页 } } }</page>將值傳送到p的xinxi處#########$("#xinxi").html(str);########最後結果如下圖片顯示: ###############接下來就是上一頁和下一頁的點擊事件了,首先是上一頁的點擊事件###
//给上一页添加点击事件 $("#prev").click(function(){ page = page-1; //当前页减1 if(page###再就是下一頁的點擊事件###<pre class="brush:php;toolbar:false">//给下一页加点击事件 $("#next").click(function(){ page = page+1; //当前页加1 if(page>maxys) { page=maxys; } Load(); //加载数据 LoadXinXi(); //加载分页信息 })###給循環的數字加點擊事件###
//给中间的列表加事件 $(".list").click(function(){ page = parseInt($(this).attr("bs")); Load(); //加载数据 LoadXinXi(); //加载分页信息 })
最后都调用一下就可以了
4.关键字查询,这里就是要对查询进行加点击事件
("#chaxun").click(function(){ page = 1; Load(); //加载数据 LoadXinXi(); //加载分页信息 })
最后整体的显示:
这样分页查询解结束了,没有刷新页面就可以分页显示,看下整体的效果
(1)分页显示
(2)查询显示
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是ajax分頁查詢圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

Python和JavaScript的未來趨勢包括:1.Python將鞏固在科學計算和AI領域的地位,2.JavaScript將推動Web技術發展,3.跨平台開發將成為熱門,4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景,並在性能上有更多突破。

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

是的,JavaScript的引擎核心是用C語言編寫的。 1)C語言提供了高效性能和底層控制,適合JavaScript引擎的開發。 2)以V8引擎為例,其核心用C 編寫,結合了C的效率和麵向對象特性。 3)JavaScript引擎的工作原理包括解析、編譯和執行,C語言在這些過程中發揮關鍵作用。

JavaScript是現代網站的核心,因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容,2)通過DOMAPI操作網頁,3)支持複雜的交互效果如動畫和拖放,4)優化性能和最佳實踐提高用戶體驗。

C 和JavaScript通過WebAssembly實現互操作性。 1)C 代碼編譯成WebAssembly模塊,引入到JavaScript環境中,增強計算能力。 2)在遊戲開發中,C 處理物理引擎和圖形渲染,JavaScript負責遊戲邏輯和用戶界面。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

WebStorm Mac版
好用的JavaScript開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具

Dreamweaver CS6
視覺化網頁開發工具

SAP NetWeaver Server Adapter for Eclipse
將Eclipse與SAP NetWeaver應用伺服器整合。