首页 后端开发 C#.Net教程 asp.net使用AJAX实现无刷新分页

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

Jan 10, 2017 pm 02:17 PM

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

在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="&#39;6&#39;">;
                htmlStr += <span>共有记录 + data.Count + ;共<span id="&#39;count&#39;"> + (data.Count % 5 == 0 ? parseInt(data.Count / 5) : parseInt(data.Count / 5 + 1)) + </span>页 + </span>;
                htmlStr += 首    页   ;
                htmlStr += 前一页   ;
                htmlStr += 后一页   ;
                htmlStr += 尾    页   ;
                htmlStr += <input type="&#39;text&#39;"><input type="&#39;button&#39;" value="&#39;跳转&#39;" onclick="&#39;GoToAppointPage(this)&#39;"> ;
                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实现无刷新分页相关文章请关注PHP中文网!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

char在C语言字符串中的作用是什么 char在C语言字符串中的作用是什么 Apr 03, 2025 pm 03:15 PM

在 C 语言中,char 类型在字符串中用于:1. 存储单个字符;2. 使用数组表示字符串并以 null 终止符结束;3. 通过字符串操作函数进行操作;4. 从键盘读取或输出字符串。

C语言各种符号的使用方法 C语言各种符号的使用方法 Apr 03, 2025 pm 04:48 PM

C 语言中符号的使用方法涵盖算术、赋值、条件、逻辑、位运算符等。算术运算符用于基本数学运算,赋值运算符用于赋值和加减乘除赋值,条件运算符用于根据条件执行不同操作,逻辑运算符用于逻辑操作,位运算符用于位级操作,特殊常量用于表示空指针、文件结束标记和非数字值。

char在C语言中如何处理特殊字符 char在C语言中如何处理特殊字符 Apr 03, 2025 pm 03:18 PM

C语言中通过转义序列处理特殊字符,如:\n表示换行符。\t表示制表符。使用转义序列或字符常量表示特殊字符,如char c = '\n'。注意,反斜杠需要转义两次。不同平台和编译器可能有不同的转义序列,请查阅文档。

c#多线程和异步的区别 c#多线程和异步的区别 Apr 03, 2025 pm 02:57 PM

多线程和异步的区别在于,多线程同时执行多个线程,而异步在不阻塞当前线程的情况下执行操作。多线程用于计算密集型任务,而异步用于用户交互操作。多线程的优势是提高计算性能,异步的优势是不阻塞 UI 线程。选择多线程还是异步取决于任务性质:计算密集型任务使用多线程,与外部资源交互且需要保持 UI 响应的任务使用异步。

char在C语言中如何进行类型转换 char在C语言中如何进行类型转换 Apr 03, 2025 pm 03:21 PM

在 C 语言中,char 类型转换可以通过:强制类型转换:使用强制类型转换符将一种类型的数据直接转换为另一种类型。自动类型转换:当一种类型的数据可以容纳另一种类型的值时,编译器自动进行转换。

char与wchar_t在C语言中的区别 char与wchar_t在C语言中的区别 Apr 03, 2025 pm 03:09 PM

在 C 语言中,char 和 wchar_t 的主要区别在于字符编码:char 使用 ASCII 或扩展 ASCII,wchar_t 使用 Unicode;char 占用 1-2 个字节,wchar_t 占用 2-4 个字节;char 适用于英语文本,wchar_t 适用于多语言文本;char 广泛支持,wchar_t 依赖于编译器和操作系统是否支持 Unicode;char 的字符范围受限,wchar_t 的字符范围更大,并使用专门的函数进行算术运算。

char数组在C语言中如何使用 char数组在C语言中如何使用 Apr 03, 2025 pm 03:24 PM

char 数组在 C 语言中存储字符序列,声明为 char array_name[size]。访问元素通过下标运算符,元素以空终止符 '\0' 结尾,用于表示字符串终点。C 语言提供多种字符串操作函数,如 strlen()、strcpy()、strcat() 和 strcmp()。

C语言 sum 的作用是什么? C语言 sum 的作用是什么? Apr 03, 2025 pm 02:21 PM

C语言中没有内置求和函数,需自行编写。可通过遍历数组并累加元素实现求和:循环版本:使用for循环和数组长度计算求和。指针版本:使用指针指向数组元素,通过自增指针遍历高效求和。动态分配数组版本:动态分配数组并自行管理内存,确保释放已分配内存以防止内存泄漏。

See all articles