Asp .net ＋jquery +.ashx檔案實現高效分頁

今天看到一個.java哥們 寫過的在頁面直接請求資料列表的程式碼。它是實現選中客戶連絡人後，無重新整理的彈出div羅列其它連絡人清單的功能。忽然想到既然可以請求連絡人清單，而且無重新整理。那麼取複雜的資料列表呢，後來想到了 資料分頁。我現在用了自己寫的一個分頁控制項。但是效率有時候感覺不是很高，它是以 使用者控制項＋預存程序＋分頁處理類 來實現分頁的。但是無可避免的就碰到了重新整理的問題即使分頁很快，但是只要這“刷”的一下總是感覺很不爽。而且還要頁面編譯一遍，還要在服務端處理ViewState。以及其它的效能損失。既然 .ashx 可以 省略頁面編譯的過程。再把分頁處理類 挪到用戶端，那應該是會效能提升不少，還沒有重新整理，一定很爽，想到就做。

我定的思路是： .ashx程式中，編寫好取得不同頁碼的程式。在頁面配置好的前提下，留下資料區域 div。然後在頁面請求 .ashx程式產生下一頁的html代碼。覆蓋div.innerHTMl 。

首先是頁面，因為是要實踐思路，所以頁面真是很簡單。引用了jquery.js

<div id="lab">
　　　　　　　 <input id="Button1" type="button" value="初始化資料" onclick="Init();" />
　　　　　　　 <div id="Content" style="width: 100%">
　　　　　　　 </div>
　　　　　　　 <div id="PagePanel" style="margin-left:20px"><label id="pageInfo"></label><a href="http://www.bianceng.cn/index.php#" onclick="InitUp()">Last</a>&nbsp; &nbsp;<a href="http://www.bianceng.cn/index.php#" onclick="InitNext()">Next</a></div>
　　　　　　　 <input type="hidden" value="0" id="currPageIndex" />
　　　 </div>

然後編寫.js檔案、實現用戶端的分頁控制。已經在顯示頁面儲存了當前頁碼資訊 一個<input type='hidden'>。

引用js檔案後，就可以用了，哈哈，很順利。

// JScript 檔案

function Init()
{
　　　　　 $.get("Handler.ashx", function (tablestr) {
　　　　　　 document.getElementById('Content').innerHTML=tablestr;
　　　　　　 document.getElementById('currPageIndex').value='1';
　　　 });
}
function InitNext()
{
　　　 var currIndex=document.getElementById('currPageIndex').value;
　　　 var nextIndex=Number(currIndex)+1;

　　　 $.get("NextHandler.ashx",{index:currIndex},function (tablestr) {
　　　　　　 document.getElementById('Content').innerHTML=tablestr;
　　　　　　 document.getElementById('pageInfo').innerText="當前第 "+nextIndex+" 頁";
　　　　　　 document.getElementById('currPageIndex').value=nextIndex;
　　　 });
}
function InitUp()
{
　　　 var currIndex=document.getElementById('currPageIndex').value;
　　　 var nextIndex=Number(currIndex)-1;

　　　 $.get("PreviousHandler.ashx",{index:currIndex},function (tablestr) {
　　　　　　 document.getElementById('Content').innerHTML=tablestr;
　　　　　　 document.getElementById('pageInfo').innerText="當前第 "+nextIndex+" 頁";
　　　　　　 document.getElementById('currPageIndex').value=nextIndex;
　　　 });
}