Asp.net+jquery+.ashx文件實現分頁思路
2024-07-10 12:46:04
供稿：網友
今天看到一個.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="#" onclick="InitUp()">Last</a> <a href="#" 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;
});
}
將它引用到顯示頁面
代碼如下:
