asp.net uses AJAX to implement refresh-free paging

The query function is the most important function in development. When displaying a large amount of data, what we use most is paging.

There are many data display controls in ASP.NET, such as Repeater and GridView. The most commonly used GridView also has its own paging function. But we know that using GridView to display data, if ViewState is not disabled, the page size will be very large. And usually when we click on the homepage, next page, previous page, and last page, these functions will cause page postback, which means that we need to completely interact with the server. The response time and the amount of data transmitted are very large. .

AJAX paging can solve these problems very well.

Data display Pasing.aspx page JS code:

<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 code of the same page:

The CS code of jQueryPaging.aspx page is as follows:

Quote this Namespace: using System.Web.Script.Serialization;//JavaScriptSerializer is used.

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; }
    }

This is a simple example of paging without refreshing. Due to my limited JS level, I can only do this now. Of course, some new features can be added. Here I just want to share my method with you. As for the function, we will continue to improve it in the future! ! !

For more articles related to asp.net using AJAX to achieve refresh-free paging, please pay attention to the PHP Chinese website!