查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。
在asp.net 中有很多数据展现的控件，比如repeater、gridview，用的最多的gridview，它同时也自带了分页的功能。但是我们知道用gridview来显示数据，如果没有禁用viewstate，页面的大小会是非常的大的。而且平时我们点击首页，下一页，上一页，尾页这些功能都是会引起页面回发的，也就是需要完全跟服务器进行交互，来回响应的时间，传输的数据量都是很大的。
ajax的分页可以很好的解决这些问题。
数据显示pasing.aspx页面js代码：
<script type=text/javascript>
var pageindex = 0;
var pagesize = 5;
window.onload = ajaxgetdata(name,0,5);
function ajaxgetdata(name, index, size){
$.ajax({
url: jquerypaging.aspx,
type: get,
data: name= + name + &pageindex= + index + &pagesize= + size,
datatype: json,
success: function (data) {
var htmlstr = ;
htmlstr +=
htmlstr +=
htmlstr +=
htmlstr += ;
htmlstr += //data.cloudfilelists.length
for (var i = 0; i < data.cloudfilelists.length; i++)
{
htmlstr += ;
htmlstr +=
+
htmlstr += ;
}
htmlstr += ;
htmlstr += ;
htmlstr += ;
htmlstr += ;
htmlstr += ;
htmlstr += ;
htmlstr += <table><thead><tr><td>编号</td><td>文件名</td></tr></thead><tbody><tr><td> + data.cloudfilelists[i].fileid + </td><td> + data.cloudfilelists[i].filename + </td></tr></tbody><tfoot><tr><td colspan="'6'">;
htmlstr += <span>共有记录 + data.count + ;共<span id="'count'"> + (data.count % 5 == 0 ? parseint(data.count / 5) : parseint(data.count / 5 + 1)) + </span>页 + </span>;
htmlstr += 首 页 ;
htmlstr += 前一页 ;
htmlstr += 后一页 ;
htmlstr += 尾 页 ;
htmlstr += <input type="'text'"><input type="'button'" value="'跳转'" onclick="'gotoappointpage(this)'"> ;
htmlstr += </td></tr></tfoot></table>;
$(#divsearchresult).html(htmlstr);//重写html
},
error: function (xmlhttprequest, textstatus, errorthrown) {
alert(xmlhttprequest);
alert(textstatus);
alert(errorthrown);
}
});
}
//首页
function gotofirstpage() {
pageindex = 0;
ajaxgetdata($(#txtsearch).val(), pageindex, pagesize);
}
//前一页
function gotoprepage() {
pageindex -= 1;
pageindex = pageindex >= 0 ? pageindex : 0;
ajaxgetdata($(#txtsearch).val(), pageindex, pagesize);
}
//后一页
function gotonextpage() {
if (pageindex + 1 < parseint($(#count).text())) {
pageindex += 1;
}
ajaxgetdata($(#txtsearch).val(), pageindex, pagesize);
}
//尾页
function gotoendpage() {
pageindex = parseint($(#count).text()) - 1;
ajaxgetdata($(#txtsearch).val(), pageindex, pagesize);
}
//跳转
function gotoappointpage(e) {
var page = $(e).prev().val();
if (isnan(page)) {
alert(请输入数字!);
}
else {
var temppageindex = pageindex;
pageindex = parseint($(e).prev().val()) - 1;
if (pageindex < 0 || pageindex >= parseint($(#count).text())) {
pageindex = temppageindex;
alert(请输入有效的页面范围!);
}
else {
ajaxgetdata($(#txtsearch).val(), pageindex, pagesize);
}
}
}
</script>
同一页面html代码：
jquerypaging.aspx页面的cs代码如下：
引用这个命名空间：using system.web.script.serialization;//javascriptserializer要用的。
protected void page_load(object sender, eventargs e)
{
int32 pageindex = int32.minvalue;
int32 pagesize = int32.minvalue;
string name = string.empty;
javascriptserializer jss = new javascriptserializer();
if (request[name] != null)
{
name = request[name].tostring();
if (request[pageindex] != null)
{
pageindex = int32.parse(request[pageindex].tostring());
pagesize = request[pagesize] != null ? int32.parse(request[pagesize].tostring()) : 5;
ilist<cloudfile> cloudfilelists = new list<cloudfile>();//cloudfile是自己写的类，表示一条数据</cloudfile></cloudfile>
cloudfile cf = null;
int cout = 0;
dataset ds = lookdatafromdb(name, pageindex, pagesize,out cout);
foreach (datarow row in ds.tables[0].rows)//把你的数据重新封装成lis，才能被jss.serialize()，不然会报错。
{
cf = new cloudfile();
cf.fileid = row[filepathid].tostring();
cf.filename = row[filename].tostring();
cloudfilelists.add(cf);
}
if (cloudfilelists.count > 0)
{
response.write({count: + (cout) + ,cloudfilelists: + jss.serialize(cloudfilelists) + });
response.end();
}
}
}
}
private dataset lookdatafromdb(string name, int pageindex, int pagesize,out int cout)
{
dataset ds = new dataset();
try
{
pageindex = 5 * pageindex;//pageindex ，表示这一页从哪一条数据开始
// 这里写自己的数据获取方法，把数据获取好了甩到ds里面，返回到前面。（应该有更好的办法，自己想哦，也可以发评论我们一起探讨....。）
}
catch (exception)
{
cout = 0;
ds = null;
}
return ds;
}
//<span style="font-family:">cloudfile类</span>
public class cloudfile
{
public string fileid { get; set; }
public string filename { get; set; }
public string filedirname { get; set; }
}
这样一个简单的无刷新分页的实例就完成了。由于本人的js水平有限，现在只能做到这了。当然还可以添加一些新的功能。这里我只是想将我的方法与大家分享。至于功能，待以后继续完善了！！！
更多asp.net使用ajax实现无刷新分页。