AJAX paging asp.net Paging

AJAX paging asp.net Paging

 

The query function is the most important feature in development. The display of a large amount of data is paging.

There are many data display controls in ASP. NET, such as Repeater and GridView, which use the most-used GridView. It also comes with the paging function. However, we know that using the GridView to display data, if ViewState is not disabled, the page size will be very large. In addition, when we click the home page, next page, previous page, and last page, these functions will cause page sending back, that is, the time for completely interacting with the server and responding back and forth, the amount of data transmitted is large.

AJAX paging can effectively solve these problems.

JS Code of the Pasing. aspx page for data display:

 <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 + =
 
 
 
    
No.
 
    
File Name
 
   
+ Data. cloudfileLists [I]. FileID +
+ Data. cloudfileLists [I]. FileName +
; HtmlStr + = total records + data. Count +; Total + (data. Count % 5 = 0? ParseInt (data. count/5): parseInt (data. count/5 + 1) + Page +; htmlStr + = first page; htmlStr + = previous page; htmlStr + = next page; htmlStr + = last page; htmlStr + =; HtmlStr + =
; Iterator (includivsearchresult).html (htmlStr); // rewrite html}, error: function (XMLHttpRequest, textStatus, errorThrown) {alert (XMLHttpRequest); alert (textStatus ); alert (errorThrown) ;}}) ;}// homepage 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);} // jump to function GoToAppointPage (e) {var p Age = $ (e). prev (). val (); if (isNaN (page) {alert (enter a number !);} Else {var tempPageIndex = pageIndex; pageIndex = parseInt ($ (e ). prev (). val ()-1; if (pageIndex <0 | pageIndex> = parseInt ($ (# count ). text () {pageIndex = tempPageIndex; alert (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:

Reference this namespace: using System. Web. Script. Serialization; // used by 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
 
  
CloudfileLists = new List
  
   
(); // Cloudfile is a self-written class that represents a piece of data
  
 

CloudFile cf = null; int cout = 0; DataSet ds = LookDataFromDB (name, pageIndex, pageSize, out cout); foreach (DataRow row in ds. tables [0]. rows) // reencapsulate your data into Lis before it can be used by jss. serialize (). Otherwise, an error is returned. {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 {pag EIndex = 5 * pageIndex; // pageIndex indicates the data starting from which the page starts. // write your own data acquisition method here to get the data to ds, return to the front. (There should be a better way to think about it. You can also make comments and discuss it together .....)} Catch (Exception) {cout = 0; ds = null;} return ds ;}

// CloudFile class

    public class CloudFile    {        public String FileID { get; set; }        public String FileName { get; set; }        public String FileDirName { get; set; }    }

The method of this paper comes from: http://www.cnblogs.com/chenping-987123/archive/2011/02/14/1954640.html

The basic idea is provided by the above link. Thanks to the above author.

If you have any questions, I can continue to discuss them .....

Thank you again .....