asp.net使用AJAX实现无刷新分页

查询功能是开发中最重要的一个功能，大量数据的显示，我们用的最多的就是分页。

在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水平有限，现在只能做到这了。当然还可以添加一些新的功能。这里我只是想将我的方法与大家分享。至于功能，待以后继续完善了！！！