搜尋
首頁web前端js教程ajax分頁查詢詳解

ajax分頁查詢詳解

Jan 01, 2018 pm 06:29 PM
ajax分頁詳解

本文主要介紹了ajax實作分頁查詢的步驟與方法。具有很好的參考和學習ajax的價值。下面跟著小編一起來看下ajax分頁查詢詳解吧

(1)先寫個顯示資料的頁面,分頁查詢需要那幾個部分呢?

1.首先是查詢的文字方塊輸入,還有查詢按鈕,那麼就開始寫程式碼吧

<p>
<input type="text" id="key" /> //输入查询字的文本框
<input type="button" value="查询" id="chaxun" /> //查询按钮,起名字是为了以后给这个按钮加事件,因为只有点击了才可以将文本框的内容进行查询
</p>

看下效果:

 

#2.接下來就是顯示資料了,顯示資料必然要查資料庫了,就要用到ajax的方法

先將jQuery的套件引入這個顯示資料的頁面

<script src="../jquery-1.11.2.min%20.js"></script>  //引入jQuery的包

#寫想要顯示的列的內容,自然是要寫表了,寫一行,行中有單元格放想要顯示內容的欄位名稱(這裡顯示3種資訊)

<table width="50%" border="1" cellpadding="0" cellspacing="0">
  <tr><br>    //显示的字段名,这是第一行的内容
  <td>代号</td>
  <td>名称</td>
  <td>父级代号</td>
  </tr>
  <tbody id="bg>
<br>  //这里放的就是查找数据库的内容了
 </tbody>
  
</table>

現在還沒檢視資料庫,但可以先看下顯示效果:

 

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 &#39;%{$key}%&#39; 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 id="xinxi">
  //显示数字或是上一页
</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 &#39;%{$key}%&#39;"; //通过关键字查询总条数
$zts = $db->StrQuery($sql);
echo ceil($zts/$num); //转换成整数

處理頁面執行結束後,就要把查到的最大頁數交個預設的最大頁數

success: function(d){
 maxys = d; //将执行结果交给定义的最大页数
}

這樣之後就是要有“上一頁”“下一頁”,中間的數可以讓他每次顯示5條

#
str += "<span>总共:"+maxys+"页</span> ";
str += "<span id=&#39;prev&#39;>上一页</span>"; //后面要用到单击事件的,在这起个名字
//循环的当前页
str += "<span id=&#39;next&#39;>下一页</span>"; //这个也是要用点击事件的也要起名字

然後再寫循環的頁數了

#
for(var i=page-2;i<page+3;i++) //前后显示2个
{
  if(i>=minys && i<=maxys) //页数是要有范围的,大于最小页数,小于最大页数
  {
 if(i==page)
 {
   str += "<span class=&#39;dangqian&#39; bs=&#39;"+i+"&#39;>"+i+"</span> "; //当前页选中
 }
     else
     {
   str += "<span class=&#39;list&#39; bs=&#39;"+i+"&#39;>"+i+"</span> "; //显示当前页
     }
  }
}

將值傳送到p的xinxi處

$("#xinxi").html(str);

最後結果如下圖顯示:  

#接下來就是上一頁和下一頁的點擊事件了,首先是上一頁的點擊事件

//给上一页添加点击事件
$("#prev").click(function(){
 page = page-1; //当前页减1
 if(page<1)
 {
   page=1;
 }
 Load(); //加载数据
 LoadXinXi(); //加载分页信息
})

再就是下一頁的點擊事件

//给下一页加点击事件
$("#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)查詢顯示

以上就是這篇文章的所有內容了,希望對大家提供到幫助!

相關推薦:

Ajax請求WebService跨網域問題的解決方案

ajax處理伺服器傳回的三種資料類型方法

ajax取得php頁面的回傳參數,控制項賦值的方法

#

以上是ajax分頁查詢詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript是用C編寫的嗎?檢查證據JavaScript是用C編寫的嗎?檢查證據Apr 25, 2025 am 12:15 AM

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

JavaScript的角色:使網絡交互和動態JavaScript的角色:使網絡交互和動態Apr 24, 2025 am 12:12 AM

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

C和JavaScript:連接解釋C和JavaScript:連接解釋Apr 23, 2025 am 12:07 AM

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

從網站到應用程序:JavaScript的不同應用從網站到應用程序:JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中,JavaScript與HTML、CSS一起操作DOM,實現動態效果,並支持如jQuery、React等框架。 2)通過ReactNative和Ionic,JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行,支持高並發請求。

Python vs. JavaScript:比較用例和應用程序Python vs. JavaScript:比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化,JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色,使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺,用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用,支持全棧開發。

C/C在JavaScript口譯員和編譯器中的作用C/C在JavaScript口譯員和編譯器中的作用Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色,主要用于实现解释器和JIT编译器。1)C 用于解析JavaScript源码并生成抽象语法树。2)C 负责生成和执行字节码。3)C 实现JIT编译器,在运行时优化和编译热点代码,显著提高JavaScript的执行效率。

JavaScript在行動中:現實世界中的示例和項目JavaScript在行動中:現實世界中的示例和項目Apr 19, 2025 am 12:13 AM

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

JavaScript和Web:核心功能和用例JavaScript和Web:核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

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

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

MantisBT

MantisBT

Mantis是一個易於部署的基於Web的缺陷追蹤工具,用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具