婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av

主頁 > 知識庫 > Ajax讀取數據之分頁顯示篇實現代碼

Ajax讀取數據之分頁顯示篇實現代碼

熱門標簽:如何用地圖標注各分公司 察縣地圖標注 接聽電話機器人哪有 莆田防封電銷卡價格 辦理一個400電話多少錢 廣西ai語音電銷機器人哪家好 信貸電銷機器人有用嗎 電銷機器人適用范圍 蓄意標記地圖標注
我覺得還是有必要把我的ajax分頁呈現給大家.我先講一下這個ajax分頁的實現核心,然后我們再看實例效果.所謂的ajax分頁與傳統的數據分頁,在服務端的代碼基本上是一樣的.我們主要做的是使用ajax在不刷新的情況下,將請求的頁碼,和每頁要顯示的條數發送給服務端的處理網頁.大家點擊這個網址就可以看到要請求的數據:"ajax_page.asp?action=readpagecount=3 current_page=1"
在這段URL里,pagecount代表每頁要顯示幾條數據,current_page代表要請求的頁碼.服務端就是根據這兩個參數來傳回你想要請求的數據.下面我們看下實例效果:
這是前端的ajax代碼:
復制代碼 代碼如下:

html>
head>
title>ajax數據分頁/title>
style>
body{
font-size:12px;
}
table{
border-collapse:collapse;
}
li{
list-style:none;
border:1px solid;
width:20px;
height:20px;
text-align:center;
margin:5px;
padding:2px;
float:left;
cursor:pointer;
}
/style>
/head>
body>
默認顯示每頁為5條數據,你可以在下面文本框設置每頁的顯示條數hr/>
輸入每頁要顯示的條數:input id="edit_count" type="text" /> input type="button" type="button" value="確定" onclick="Read()"/>
table border="1">!--該表格用來顯示數據內容-->
thead>tr>td>編號/td>td>內容/td>/tr>/thead>
tbody id="a">/tbody>
/table>
span id="msg" style="color:red">/span>
br/>
ul id="page">!--頁導航-->
/ul>
script type="text/javascript">
var All_page;//總頁數
var All_record;//總條數
var Current_page;//當前頁
var PageCount;//每頁顯示的條數
function ajax_xmlhttp(){
//在IE中創建xmlhttpRequest,適用于IE5.0以上所有版本
var msXmlhttp = new Array("Msxml2.XMLHTTP.5.0","Msxml2.XMLHTTP.4.0","Msxml2.XMLHTTP.3.0","Msxml2.XMLHTTP","Microsoft.XMLHTTP");
for(var i=0; imsXmlhttp.length; i++){
try
{
_xmlhttp=new ActiveXObject(msXmlhttp[i]);
}
catch(e)
{
_xmlhttp=null;
}
} //循環創建基于IE瀏覽器的xmlhttp.結束
//如果非IE瀏覽器,則創建基于FireFox等瀏覽器的xmlhttpRequest
if(!_xmlhttp typeof XMLHttpRequest != "undefined")
{
_xmlhttp=new XMLHttpRequest();
}
return _xmlhttp;
}
//獲取元素函數
function $(elem){
return typeof elem == "string" ? document.getElementById(elem) : elem;
}
//讀取數據函數
function Read(){
if(arguments.length!=0){//如果有參數傳遞過來,則證明你點擊了某個頁碼
var e = arguments[0] || window.event; //標準化事件對象
var obj = e.target || e.srcElement; //獲取事件對象,你點擊的那個頁碼元素
Current_page = parseInt(obj.innerHTML);//獲取元素中的數字值,證明你要請求的是第幾頁
$("msg").innerHTML = "當前為第"+Current_page+"頁";//提示信息:當前請求的頁
}
PageCount = $("edit_count").value;//獲取文本框的值
if(PageCount.length == 0){ //如果文本框為空
PageCount = 5; //默認每頁顯示5條數據
}
var ajax = ajax_xmlhttp(); //將xmlhttprequest對象賦值給一個變量.
ajax.open("post","ajax_page.asp?action=readpagecount="+PageCount+" current_page="+Current_page,true);//設置請求方式,請求的網頁,url的action參數為read,異步請求
ajax.onreadystatechange = function(){//你也可以這里指定一個已經寫好的函數名稱
if(ajax.readyState == 4){//數據返回成功
if(ajax.status == 200){//http請求狀態碼返回ok
var xmlData = ajax.responseXML;//以xml格式接收返回的數據,并保存在xmlData變量里
All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;
All_page = All_Record / PageCount;
var page_list = $("page");
while(page_list.childNodes.length!=0){
page_list.removeChild(page_list.childNodes[0]);
}
for(var i=0;iMath.ceil(All_page);i++){ //動態創建頁碼列表
var li = document.createElement("li");
li.innerHTML = i+1;//因為i以0開始,所以要+1顯示頁碼
li.onclick = function(e){Read(e)};//為每個li的頁碼綁定單擊事件
page_list.appendChild(li);//將生成好的頁碼元素放到div里
}
var list = xmlData.getElementsByTagName("list");//在返回的數據里,獲取所有list標簽
if(list.length!=0){
var t = document.getElementById("a");//獲取展示數據的表格
while(t.rows.length!=0){ //在讀取數據時如果表格已存在行.一律刪除
t.removeChild(t.rows[0]);
}
for(var i=0;ilist.length;i++){
var tr = t.insertRow(t.rows.length);//有幾個list就為表格增加幾行.
var td = tr.insertCell(0);//第一個單元格存放數據編號
td.innerHTML = list[i].childNodes[0].firstChild.nodeValue;
var td = tr.insertCell(1);//第二個單元格存放數據內容
td.innerHTML = list[i].childNodes[1].firstChild.nodeValue;
}
}
}
}
}
ajax.send(null);//提交請求,參數為null
}
Read();//運行Read函數
/script>
/body>
/html>

上面是本次ajax分頁教程的前端代碼,html部份我們就不講了.直接開始script中的內容.首先我們定義了4個全局變量,分別是:

All_page:總頁數,創建頁碼的根據
All_Record:數據總條數,All_Record/PageCount=All_page 得到總頁數
Current_page:當前請求的頁碼.傳送給服務端
PageCount:每頁顯示的條數,傳送給服務端
然后依次是我寫的3個自定義函數,分別為:
ajax_xmlhttp();該函數的作用是創建一個可用的XMLHTTPRequest對象,如果你還不知道什么是XMLHTTPRequest.請了解什么是XMLHTTPRequest
$(elem);獲取元素的函數,根據頁面中元素的id來對某個元素的引用,其實就是document.getElementById的縮寫與引用,寫成函數以后直接可以使用$("元素id")即可獲取該元素.
Read():讀取數據的函數.也是我們的老朋友了,在前幾篇的教程里都有使用.下面我們仔細來分析下,這一次我們在Read()函數里做了些什么.
(1):if(arguments.length!=0)這是在判斷在調用Read()函數時,是否有參數傳遞過來.如果有參數,則證明你點擊了某個頁碼而觸發了Read().這時我們應該獲取該頁碼,將頁碼數字賦值給Crrent_page變量.點擊了解:arguments
(2):var e = arguments[0] || window.event;標準化事件對象,arguments[0]是為了FF瀏覽器,window.event是IE瀏覽器
(3):var obj = e.target || e.srcElement;標準了事件對象以后,我們要獲取事件的源.也就是說是那個元素觸發了Read()函數.此時的obj就是你點擊的那個頁碼元素.
(4):Current_page = parseInt(obj.innerHTML);獲取元素中的數字值,證明你要請求的是第幾頁,在下面的請求中會把該值發送給服務端.
(5):PageCount = $("edit_count").value;獲取文本框里的值,如果你沒有向文本框里輸入值.那么每頁默認顯示5條數據.再聲明一次,以前講過的內容我們不再重復講解.也就是說關于上面的代碼我在該教程里沒有解釋到的.在以前的教程里會找到相關解釋.
(6):ajax.open("post","ajax_page.asp?action=readpagecount="+PageCount+" current_page="+Current_page,true);我們在請求的Url里將Pagecount與Current_page變量傳遞給了服務端,服務端接收到這兩個變量以后會經過判斷.如果PageCount為空那么將默認為5.如果Current_page為空則默認為第1頁,然后會將相應的數據傳回給客戶端.
(7):All_Record = xmlData.getElementsByTagName("allrecord")[0].firstChild.nodeValue;從服務端接收一個allrecord標簽元素.該元素包含了一個數字值,該數字值是數據的總條數.
(8):All_page = All_Record / PageCount;用總條數All_Record除以PageCount等于總頁,得出有幾頁數據以后.我們會根據All_page來創建當前頁碼列表.
(9):var page_list = $("page");獲取存放頁碼列表的那個div元素.while(page_list.childNodes.length!=0)循環遍歷該div內的子元素.將其子元素全部刪除.每次根據當前頁顯示的條數不同,會生成不同的頁碼,所以必須刪除上次請求生成的頁碼列表,當然你也可以改進我這種做法!如果你還不了解什么是子元素或如何刪除子元素,請參閱:childNodes與removeChild
(10):for(var i=0;i Math.ceil(All_page);i++);使用一個for循環根據總頁數來動態的生成頁碼列表,如果All_page為5,則生成5個頁碼.因為考慮到了會有余數.我使用了Math.ceil.如果你還不知道Math與ceil的作用,請參閱:Math與ceil
(11):var li = document.createElement("li");創建一個li元素,并賦值給一個名字為li的變量.li.innerHTML= i+1;在li元素內寫入頁碼數值.因為i是從0開始的,所有要加1.
(12):li.onclick = function(e){Read(e)};為每個li元素綁定單擊事件,這個是重點必須要理解清楚.我們向li綁定了Read(e)函數,并且利用e參數傳遞了事件對象.當你點擊每個頁碼的時候會再次觸發Read函數來讀取數據.這個時候運行的Read(e)函數,是帶有參數的.我們正是從參數內獲得了你請求的頁碼,然后賦值給Current_page,利用url發送給了服務端.
你注意一下在script腳本部份里的最后一行:Read();此時Read()沒有參數,并且只有當打開頁面或刷新頁面時才會執行這個Read(),此時的Read()向服務端發送的Current_page是空的.PageCount默認是5,這個時候服務端接收到空的頁碼,只會讀取5條數據給你.與此同時我也從服務端接收了數據的總條數,利用總條數除以每頁顯示的條數.創建了頁碼.并且為每個頁碼綁定了 Read(e)函數.只有當你點擊這些頁碼時帶有參數的Read(e)再次執行數據讀取.但此時的讀取已經向服務端發送了頁碼.你明白了嗎?
(13):page_list.appendChild(li);為li寫好了頁碼,綁定了事件以后添加到上面被獲取的div元素里.請參閱:appendChild

哦了,上面講述的部份是本次ajax分頁教程中前端的核心部份,沒有講述的內容在前幾篇的ajax教程里都有講解.下面我們來看下服務端的源碼并分析該源碼
復制代碼 代碼如下:

!--#include file="Conn.Asp"-->
%
'出自:http://Www.Web666.Net
'作者:康董
'如需轉載請務必保留以上信息
'定義一個變量,來保存xml數據
xml="?xml version='1.0' encoding='gb2312'?>body>"
action=Request.QueryString("action") '使用get方式接受一個action來判斷客戶端想要執行什么操作
Select case action
case "read" '如果為read則執行讀取數據的操作
Call Read
case else
xml = xml"msg>請求參數錯誤,請不要試圖非法操作!/msg>"
End Select
xml=xml"/body>"
Response.Clear
Response.ContentType="text/xml"
Response.CharSet="gb2312"
Response.write xml
Response.End

Sub Read '自定義的讀取數據過程
Call OpenConn '打開數據庫鏈接
Current_Page = Request("Current_Page") '當前的頁碼
PageCount = request("PageCount") '當前頁顯示的條數
xml = xml"page>"pagecount"/page>"
If Current_Page = "" Or Not IsNumEric(Current_Page) Then
Current_Page = 1
End If
If PageCount = "" Or Not IsNumEric(PageCount) Then '判斷條數輸入是否正確
PageCount = 5
End If
Sql = "Select count(*) From page_table" '讀取page_table表中共有多少條數據
Set Rs = Conn.Execute(Sql) '執行sql語句
xml = xml"allrecord>"Rs(0)"/allrecord>"
If Current_Page = 1 Then '如果是第1頁
Sql = "Select Top "PageCount" * From page_table order by id desc"
Else
Sql = "Select Top "PageCount" * From page_table where id(Select Min(id) From (Select Top "((Current_Page-1)*PageCount)" id From page_table order by id desc)) order by id desc"
End If
Set Rs=Conn.Execute(Sql)
While Not Rs.Eof
xml = xml"list>"
xml = xml"id>"Rs("id")"/id>"
xml = xml"content>"Rs("content")"/content>"
xml = xml"/list>"
Rs.MoveNext '下一條
Wend
End Sub
%>

上面是本次ajax分頁教程實例中請求的服務端網頁源碼.我在服務端使用的是Asp技術,當然你也可以使用jsp,php,.net等輕松模擬.關于在服務端輸出xml數據.在前幾篇的ajax教程里我都有講解.所以我們從該源碼中的Read讀取過程開始講起:

1、Current_Page = Request("Current_Page") :接收客戶端ajax使用url參數傳遞過來的Current_page,請求的頁碼
2、PageCount = Request("PageCount") :接收客端ajax使用url參數傳遞過來的PageCount,每頁顯示的條數
3、然后分別判斷Current_Page是否為空.或者是否為數字.如果不符合條件.則將Current_page等于1.如果PageCount也為空,或者不是數字,則將PageCount等于5,也就是每頁讀取5條數據
4、Sql = "Select count(*) From page_table"這條sql的作用是讀取表內一共有多少條數據,也就是我們在前端代碼所說的總條數.將這個總條數讀取以后并保存在一個allrecord的元素里.然后傳回給客戶端.客戶端每次讀取數據都會獲取這個數字.以該數字為依據,進行頁碼的創建.
5、If Current_Page = 1 Then 判斷Cruuent_Page是否為1,如果為1則執行:Sql = "Select Top "PageCount" * From page_table order by id desc" 該sql語句的意思很簡單,只讀取表內的"PageCount"條數據.如果你在前端沒有設置要讀取的條數.那么 PageCount等于5,也就是只讀取5條數據.讀取順序為desc,倒序讀取!
6、Else如果Crrent_Page不等于1,只有在你點擊了頁碼列表中非第1頁時,Current_Page才不會是1,那么就執行:Sql = "Select Top "PageCount" * From page_table where id(Select Min(id) From (Select Top "((Current_Page-1)*PageCount)" id From page_table order by id desc)) order by id desc",這條sql語句是分頁的核心.他的大致意思是說:在表中讀取PageCount條數據.這些數據的id必須小于已經顯示出來的數據中id最小的那條數據.比如你點擊的是第3頁,每頁顯示的條數為5條.那么這第三頁中要顯示的數據的id,必須要小于第二頁id最小的那條數據,因為是倒序讀取.你明白了嗎?如果你根本無法理解該Sql的意思.請惡補Sql的相關知識.下面的代碼是從數據庫里讀取數據,我在前幾篇都有過詳細的講解.ajax分頁至此完畢!
提示:<!--#include file="Conn.Asp"-->Conn.asp是我的數據庫鏈接文件.沒什么特別.你應該可以自己寫一個出來.網上也有很多現成的代碼.本次讀取的數據庫表名為:page_table 字段分別為ID(自動編號),content(數據內容)
今天就講到這里,有什么不明白地方.請加 ajax技術交流群:110167482
您可能感興趣的文章:
  • 用jQuery中的ajax分頁實現代碼
  • JQuery+Ajax無刷新分頁的實例代碼
  • jQuery Pagination Ajax分頁插件(分頁切換時無刷新與延遲)中文翻譯版
  • php,ajax實現分頁
  • JS+Ajax+Jquery實現頁面無刷新分頁以及分組 超強的實現
  • jQuery DataTables插件自定義Ajax分頁實例解析
  • 使用PHP+JQuery+Ajax分頁的實現
  • php+ajax實現無刷新分頁的方法
  • 基于Jquery+Ajax+Json的高效分頁實現代碼
  • AJAX分頁效果簡單實現

標簽:平涼 阿拉善盟 延邊 銅陵 鷹潭 益陽 張掖 儋州

巨人網絡通訊聲明:本文標題《Ajax讀取數據之分頁顯示篇實現代碼》,本文關鍵詞  Ajax,讀取,數據,之,分頁,;如發現本文內容存在版權問題,煩請提供相關信息告之我們,我們將及時溝通與處理。本站內容系統采集于網絡,涉及言論、版權與本站無關。
  • 相關文章
  • 下面列出與本文章《Ajax讀取數據之分頁顯示篇實現代碼》相關的同類信息!
  • 本頁收集關于Ajax讀取數據之分頁顯示篇實現代碼的相關信息資訊供網民參考!
  • 推薦文章
    婷婷综合国产,91蜜桃婷婷狠狠久久综合9色 ,九九九九九精品,国产综合av
    成人激情校园春色| 国产天堂亚洲国产碰碰| 亚洲女同女同女同女同女同69| 91精品国产综合久久精品麻豆 | 91麻豆精品国产91久久久| 激情图片小说一区| 国内外成人在线视频| 亚洲综合在线第一页| 欧美日韩在线直播| 国产成人精品亚洲777人妖 | 日韩一区精品视频| 一区二区三区在线视频免费 | 久久99精品久久久久久| 日日夜夜精品视频免费| 欧美日韩夫妻久久| 爽好久久久欧美精品| 91成人免费网站| 欧美日韩免费视频| 亚洲精品乱码久久久久久久久| 男男成人高潮片免费网站| 久久伊人蜜桃av一区二区| 91一区二区三区在线播放| 国产91丝袜在线观看| 91视频你懂的| 色综合天天天天做夜夜夜夜做| 亚洲三级小视频| 欧美一二三区在线观看| 26uuu亚洲| 亚洲精品久久久蜜桃| 午夜影视日本亚洲欧洲精品| 欧美国产日韩一二三区| 中文字幕在线一区| 午夜精品一区二区三区电影天堂| 国产一区免费电影| 91精品欧美综合在线观看最新| 精品久久久三级丝袜| 日韩精品一区二区三区在线播放| 欧美日韩国产bt| 国产午夜一区二区三区| 粉嫩嫩av羞羞动漫久久久| 国产人妖乱国产精品人妖| 日韩欧美高清dvd碟片| 亚洲黄色小视频| 国产欧美日韩在线视频| 不卡的av电影| 国产精品综合在线视频| 亚洲欧美色一区| 美日韩一区二区| 理论电影国产精品| 亚洲国产精品精华液2区45| 久久久久久亚洲综合影院红桃| 成熟亚洲日本毛茸茸凸凹| 成人v精品蜜桃久久一区| 99re亚洲国产精品| 欧美揉bbbbb揉bbbbb| 一本色道久久综合亚洲91| 国产麻豆一精品一av一免费 | 日韩va亚洲va欧美va久久| 国产成人在线免费观看| 激情综合色播五月| 日本欧美韩国一区三区| 欧美日本一道本| 首页欧美精品中文字幕| 欧美日韩日本视频| 国产一区二区三区精品欧美日韩一区二区三区 | 国产成人免费xxxxxxxx| 成人激情校园春色| 91精品国产综合久久精品app| 91看片淫黄大片一级| 欧美一二三在线| 精品久久久久久久久久久久久久久 | 国产麻豆91精品| 日本在线不卡一区| 色欧美88888久久久久久影院| 国产亚洲欧美激情| 粉嫩aⅴ一区二区三区四区| 国产亚洲一区二区三区四区| 成人综合婷婷国产精品久久| 国产精品久久看| 欧美高清hd18日本| 成人理论电影网| ...av二区三区久久精品| 在线观看亚洲专区| 亚洲摸摸操操av| 26uuu精品一区二区三区四区在线 26uuu精品一区二区在线观看 | 青青草97国产精品免费观看无弹窗版| 欧美高清激情brazzers| 成人激情综合网站| 欧美日韩一区成人| 欧美精品日韩一区| 国产露脸91国语对白| 国产精品国产三级国产有无不卡 | 精品久久久久久久久久久久包黑料| 韩国成人福利片在线播放| 久久精品这里都是精品| 欧美精品丝袜中出| 亚洲一区二区高清| 久久国产精品99久久人人澡| 国产精品婷婷午夜在线观看| 7777精品伊人久久久大香线蕉最新版| 亚洲精品在线观看网站| 国产亚洲一二三区| 91国产免费观看| 国产成人精品三级麻豆| 91在线一区二区| 视频一区二区中文字幕| 久久99在线观看| 久草这里只有精品视频| 国产揄拍国内精品对白| 亚洲欧美一区二区视频| 国产最新精品免费| 波多野结衣一区二区三区| 欧美一区二区视频在线观看2020| 亚洲国产日韩综合久久精品| 欧美性欧美巨大黑白大战| 日韩国产在线一| 欧美成人三级在线| 青娱乐精品视频| 久久蜜臀中文字幕| 国产成人av网站| 亚洲欧美另类图片小说| 欧洲激情一区二区| 久久久欧美精品sm网站| 蜜臀av性久久久久av蜜臀妖精| 99热这里都是精品| 久久这里只精品最新地址| 日韩av一区二| 欧美精品久久99久久在免费线| 国产精品女主播av| 风间由美一区二区三区在线观看| 欧美一区二区视频观看视频| 色综合网色综合| 欧美韩日一区二区三区| 欧美午夜精品一区二区三区| 另类小说图片综合网| 亚洲人成人一区二区在线观看 | 欧美日韩一区二区欧美激情| 精品中文字幕一区二区| 亚洲欧洲日韩综合一区二区| 91福利国产成人精品照片| 国产一区二区三区蝌蚪| 亚洲激情六月丁香| www日韩大片| 欧美视频完全免费看| 国产精品18久久久久久vr| 亚洲精品亚洲人成人网在线播放| 国产成人综合在线| 亚洲午夜在线视频| 中文天堂在线一区| 日韩欧美第一区| 风间由美一区二区三区在线观看 | 久久精品亚洲精品国产欧美kt∨| 91成人在线免费观看| 极品美女销魂一区二区三区免费| 曰韩精品一区二区| 中文字幕一区二| 久久久久成人黄色影片| 91 com成人网| 欧美亚洲高清一区| 97精品视频在线观看自产线路二| 免费黄网站欧美| 亚洲成人自拍网| 亚洲欧美一区二区在线观看| 久久久久久久电影| 精品精品国产高清a毛片牛牛| 欧美日韩视频在线观看一区二区三区| 国产又黄又大久久| 国产欧美综合色| 97久久超碰国产精品| 美国三级日本三级久久99| 国产精品国产成人国产三级| 欧美体内she精高潮| 国产乱码精品一品二品| 国产视频一区二区在线| av高清久久久| 亚洲图片自拍偷拍| 久久综合资源网| 青青国产91久久久久久| 国产精品乱码一区二三区小蝌蚪| 麻豆中文一区二区| 香港成人在线视频| 亚洲第一会所有码转帖| 色综合久久综合网欧美综合网| 99久久精品情趣| 成人久久久精品乱码一区二区三区| 亚洲免费观看在线视频| 一级精品视频在线观看宜春院 | 婷婷开心激情综合| 日韩欧美久久久| 久久九九影视网| 日韩欧美国产wwwww| 日韩欧美一二三四区| 精品88久久久久88久久久 | 欧美视频中文字幕| 久久亚洲精精品中文字幕早川悠里 | 亚洲国产精品欧美一二99| 视频在线观看国产精品| 国产欧美综合在线观看第十页| 中文字幕中文乱码欧美一区二区| 中文字幕亚洲视频|