標籤:
ajax實現高效分頁功能文件
一. 技術要點
非同步請求:
日期轉換:
頁碼條做法:
js清除。
批量刪除資料
二. 步驟
1. 使用
asp.net
非同步請求資料:(1.
)建立xmlhtttprequest
物件來實現非同步請求:這也是
ajax
最重要的東東。
l 注意:
物件在ie
瀏覽器和非
ie瀏覽器中建立的方法不同。l (
2)下面使用相容方式建立非同步物件:
3)建立請求;
- open (
告訴他要去做的事情
)獲得資料主要通過
get請求,
get請求有快取(
get請求同乙個頁面會快取。當第二次訪問該頁面的時候不在提交到伺服器
從快取裡面拿值),這是我們不願意看到的,可以取消快取,使用一下**:
); 讓他去請求資料(5
)設定readystatechange
事件觸發乙個
**函式
; -onreadystatechagne:最重要的東東
這個事件主要是判斷非同步請求的不同狀態下,觸發不同的事件,做出不同的響應。
他有乙個重要的屬性
readystate
屬性:readystate屬性指出了
物件在傳送
/接收資料過程中所處的幾個狀態。
物件會經歷
5種不同的狀態。
• 0:未初始化。物件已經建立,但還未初始化,即還沒呼叫
open
方法;• 1:已開啟。物件已經建立並初始化,但還未呼叫
send
方法;• 2:已傳送。已經呼叫
send
方法,但該物件正在等待狀態碼和頭的返回;
• 3:正在接收。已經接收了部分資料,但還不能使用該物件的屬性和方法,因為狀態和響應頭不完整;
• 4:已載入。所有資料接收完畢
當請求資料回來後通過
來接收資料。
注意:這裡回來的是
json
形式的字串,要轉成
json
物件通過:
eval_r()
方法來**
varjsonarr = eval_r(
"("+ res +
")");
再注意:有時候字串中有陣列等比較複雜的形式的字元時候,要如上面的形式加上
eval_r(
"("+ res +
")");
小括號以便作為表示式執行,要不然得不到資料,轉化失敗。l (
6)請求資料回來後,得到的資料是裡面有:資料中的要查詢的表資料,還有表中總共多少條,分了幾頁。為下面的頁碼條做準備。
問題?當使用者訪問過的頁面後,比如第一頁,過一會兒在訪問這一頁時候,需要重新傳送請求到伺服器端。這樣不好,為了減少
伺服器端的負擔,加快使用者瀏覽的速度,可以在瀏覽器端定義乙個全域性變數,每當得到伺服器傳送來的資料,就把它放在我的瀏覽器端
的全域性變數中,當在此訪問他們的時候,判斷一下,全域性變數中是否存在,如果存在,直接從中拿資料,否則在回到伺服器端拿資料。 (7
)需要的全域性變數:
varpageindex = 1;
當前訪問的頁數
varpagecount = 0;
總頁數var
rowcount = 0;
//總資料行
非同步物件
vartb =
false
; //
**物件
varjsonall =
newarray();
快取全域性變數
2. 在瀏覽器端指令碼
js儲存資料使用
json
物件後:下一步要不資料放到瀏覽器端展現給使用者看:下面通過
js**建立**行來存放資料
通過乙個方法,乙個業務就要寫個方法,思路清晰,**也清晰。
function
createtr(jsontr)
}所以要手動的通過
js來清除原來的資料。
function
cleartr()
}4.頁碼條的製作:
頁碼條的製作的準備工作:需要從資料庫獲得總資料條數,總頁數
function
creatsar()
function
forcreatepage()
stra +=
"+ i +
");'>"
+ i + "";
}return
stra;
}//06--
function
prepage()
else
return
pageindex;
}//07--
function
nextpage()
else
return
pageindex;
}注意的問題:建立頁碼條的方法在**來呼叫?、
在loaddata()
方法裡,建立完**行後再呼叫他。因為裡面傳遞了當前使用者訪問的頁面,每次訪問都要把全域性的變數
pageindex
當前的頁改變。
在loaddata()
方法裡面,必須寫下傳入的當前頁,把它再賦值給全域性變數。
---這一點很重要。
5.日期轉換的問題:從資料庫中得到的
datetime
型別的日期格式
2011-08-10 17:40:00.717
轉成2011-08-10
可以通過寫的乙個
js方法來解決:
function
changedateformat(cellval)
三. 外加的功能:批量刪除資料
—知識點:
1.非同步物件來刪除資料
2.checkbox
—來選擇要刪除的物件,設定標籤
name
都為同乙個名字,
value
值為該行要刪除資料的
id3.寫乙個批量刪除按鈕,通過點選按鈕來批量刪除,呼叫刪除的方法
4.根據使用者選擇的,選擇後的,得到
id—根據
value
放在乙個字串裡,然後可以使用
sql語句處理刪除操作
in(---)
5.如果資料庫更新成功,還有頁面上的資料,為了不讓他重新整理,可以使用
js處理,直接清除刪除的資料行,這個很重要。
上面的到了要刪除的
id—字串,然後分割成陣列,得到每個
id,迴圈**行來查詢第一列的
id如果相等,刪除這一行。
**如下:
"批量刪除成功
刪除行方法
function
delrow(id)
ajax無重新整理分頁
首頁初始化 當前頁 和 每頁顯示的頁數getdata 1,8 然後傳送ajax請求去後台讀取ajax動態資料 function getdata curpage,pagesize succesmethod function data,textstatus 在以前處理ajax 返回值需要動態寫入表示資料...
ajax無重新整理分頁
通過ajax傳值傳到控制器層,在這裡我是用yii框架做的,後台的分頁都是需要時無重新整理分頁的,所以沒有用它的自帶分頁 控制器層 模型層 使用者列表 public function role s pages 如下 首先是檢視層 搜尋後分頁 function ajax search page 1 控制...
ajax實現無重新整理分頁
html id content2 class tabscontent class user ques name list id vo key k class q message class q tiwen 新訊息 href a span div volist div class flickr id ...