首页 / 脚本样式 / jQuery / Asp .net ＋jquery +.ashx文件实现高效分页

Asp .net ＋jquery +.ashx文件实现高效分页2011-01-30 博客园 邢少今天看到一个.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;
}）;
}