ASP. NET uses Ajax for no-refresh paging

The query function is the most important function in the development, the large amount of data display, we use the most is the paging.

In ASP. There are a lot of data display controls, such as Repeater, GridView, the most used GridView, it also comes with the function of paging. But we know that using the GridView to display the data, if the ViewState is not disabled, the size of the page will be very large. And usually we click on the homepage, next page, the last page, the last of these features will cause the page postback, that is, the need to fully interact with the server, back and forth response time, the amount of data transmitted is very large.

Ajax paging can be a good solution to these problems.

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> number </td><td> filename </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> Total Records + data. Count +; Total <span id= "' count '" > + (data. Count% 5 = = 0? parseint (data. COUNT/5): parseint (data.                COUNT/5 + 1) + </span> page + </span>;                Htmlstr + = home;                Htmlstr + = Previous page;                Htmlstr + = after one page;                Htmlstr + = last;                Htmlstr + = <input type= "' Text '" ><input type= "' button '" value= "' Jump '" onclick= "' gotoappointpage (This) ' >;                 Htmlstr + = </td></tr></tfoot></table>; $ (#divSearchResult). HTML (HTMLSTR);//Rewrite HTML}, Error:function (xmlhttprequEST, textstatus, Errorthrown) {alert (XMLHttpRequest);                alert (textstatus);            alert (Errorthrown);    }        });        }//Home function Gotofirstpage () {pageIndex = 0;    Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);        }//Previous function Gotoprepage () {pageIndex-= 1; PageIndex = PageIndex >= 0?        pageindex:0;    Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize); }//Next function Gotonextpage () {if (PageIndex + 1 < parseint ($ (#count). Text ())) {PageIndex +        = 1;    } ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);        }//Last function Gotoendpage () {PageIndex = parseint ($ (#count). Text ())-1;    Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize);        }//Jump function Gotoappointpage (e) {var page = $ (E). Prev (). Val ();        if (IsNaN (page)) {Alert (Please enter a number!); } else {var tEmppageindex = PageIndex;            PageIndex = parseint ($ (E). Prev (). Val ())-1;                if (PageIndex < 0 | | PageIndex >= parseint ($ (#count). Text ())) {pageIndex = Temppageindex;            Alert (Please enter a valid page range!);            } else {Ajaxgetdata ($ (#txtSearch). Val (), PageIndex, pageSize); }}}</script>

HTML code for the same page:

The CS code of the Jquerypaging.aspx page is as follows:

Refer to this namespace: 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 is a class written by itself, representing a data </cloudfile><            /cloudfile> Cloudfile CF = null;            int cout = 0;            DataSet ds = Lookdatafromdb (name, PageIndex, Pagesize,out cout); foreach (DataRow row in DS. Tables[0]. Rows)//re-encapsulate your data into LIS in order to be JSS.            Serialize (), or you will get an error.                {CF = new cloudfile (); Cf. FileID = Row[filepathid].                ToString (); Cf. Filename = Row[filename].                ToString ();            Cloudfilelists.add (CF); } if (Cloudfilelists.count > 0) {Response.Write ({Count: + (cout) +, cloudfilelist S: + 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, which is the page from which the data start//here to write their own data acquisition method, the data obtained well flung into the DS, back to the front. (There should be a better way, you want to Oh, you can also comment we discuss together .....)        )} catch (Exception) {cout = 0;    ds = NULL; } return DS;}

<span style= "font-family:" >cloudfile class </span>

    public class Cloudfile    {public        String FileID {get; set;}        Public String FileName {get; set;}        Public String Filedirname {get; set;}    }

Such a simple instance of a no-refresh paging is complete. Because my JS level is limited, now can only do this. Of course, you can also add some new features. Here I just want to share my way with you. As for the function, to continue to improve after!!!