Use jQuery to implement code _ jquery for asynchronous sorting and paging of GridView

Jquery is often used. ui. tabs label. For example, we can put Backup management on a page, which has two tabs for backup and restoration respectively. However, this page will be bloated every time a backup Management page is requested, the server will upload all the backup and Restoration Information to the client, and then the ui. tabs folds the two types of information and displays them separately. tabs provides ajax functions for me. Each of our tabs can apply another page directly.
For example:

The Code is as follows:

• Backup


• Restore

However, when the Restore. when aspx has a server-side control, it will not be ideal when it interacts with the server. For example, if the GridView comes with sorting, it is impossible to implement paging, because every interaction always shows the status of the tab That you load for the first time (the first page that the gridview may always display), and sometimes even the whole page is fully filled.

To solve this problem, first consider ajax to prevent all referenced pages from being reloaded. UpdatePanel: I tried it, but I thought about juery.

Next I will demonstrate how to use jquery to Implement Asynchronous sorting and paging OF THE GridView.

First, we also put a gridview on the page, which will not be actually displayed as part of the page, but as an auxiliary html output. When an ajax request comes, we use this GridView, render is Html output, and ajax callback function is displayed. In order not to display the GridView, I set Visible = false in the PreRender. Visible = false cannot be set directly. Otherwise, it will not be converted into html by Render.



Code

The Code is as follows:

Note that a function is specified in the onload event of the Body. When the page is loaded, the function requests the server to return data. Itself is an ajax request

The prototype is as follows:

Code

The Code is as follows:

Var getPageData = function (I)
{
$. Ajax ({
Url: 'Restore. aspx? '+ New Date () +' & page = '+ I, // specify pageindex
Type: 'get ',
Success: function (data, textStatus)
{
$ ('# Showdata') [0]. innerHTML = data;
},
Error: function (XMLHttpRequest, textStatus)
{
// Debugger;
$ ('# Showdata'). text (XMLHttpRequest. responseText );
},
Complete: function (XMLHttpRequest, textStatus)
{
}
});

The next step is sorting. Use get to specify the sorting field and the sorting direction. The function is as follows:
Code

The Code is as follows:

Var sortDataGridView = function (sortExpression, sortDirection)
{
Event. returnVaule = false; // prevents server submission.
$. Ajax ({
Url: 'Restore. aspx? '+ New Date () +' & sortEx = '+ sortExpression +' & sortDir = '+ sortDirection, // IE is cached. Therefore, new Date () is added to prevent cache impact.
Type: 'get ',
Success: function (data, textStatus)
{
$ ('# Showdata') [0]. innerHTML = data;
},
Error: function (XMLHttpRequest, textStatus)
{
$ ('# Showdata'). text (XMLHttpRequest. responseText );
},
Complete: function (XMLHttpRequest, textStatus)
{
}
});
}

When you click HeadText in the GridView, We will trigger sortDataGridView to Implement Asynchronous sorting to view the original content of the GridView, which is actually A flag
We want to add an onclick event for this tag and remove the href attribute value to prevent the PostBack server. Therefore, I will handle the RowDataBound event in the GridView as follows:

Code

The Code is as follows:

Protected void gvRestore_RowDataBound (object sender, GridViewRowEventArgs e)
{
If (e. Row. RowType = DataControlRowType. Header)
{
For (int I = 1; I <= 7; I ++)
{
LinkButton lt = (LinkButton) e. Row. Cells [I]. Controls [0];
Lt. Attributes ["href"] = "#";
Lt. OnClientClick = string. Format ("return sortDataGridView ('{0}', '{1}')", lt. CommandArgument, "ASC ");
}
}
If (e. Row. RowType = DataControlRowType. Pager)
{
E. Row. Visible = false;
}
}

In this step, the idea is basically clear. The rest is to respond to ajax requests on the server side. It is very simple to look at the Code directly. Note that the RendControl method of the GridView is called to output html.



Now we can implement ajax sorting and paging in the gridview. To sum up the idea, it is actually very simple, but it still takes a detour in implementation. In the main case, we originally wanted to manually instantiate a GridView in the form of code, but it is still not implemented because I added a template column. Add an intput type = 'radio' in the template column. I inherit ITemplate during code, but I do not know how to implement value = '<% # Eval ("operatePath ") %> '. Here is a question. Who knows? Please let me know.

The Code is as follows:

Select

Code

The Code is as follows:

Static string sortDirection = "ASC ";
Protected void Page_Load (object sender, EventArgs e)
{
If (hasKeyName ("page "))
{
If (! String. IsNullOrEmpty (Request. QueryString ["page"]. ToString ()))
{
This. gvRestore. PageIndex = int. Parse (Request. QueryString ["page"]. ToString ());
ResponseData (this. gvRestore );
}
}
Else
If (hasKeyName ("sortEx "))
{
String sortEx = Request. QueryString ["sortEx"]. ToString ();
String sortDir = Request. QueryString ["sortDir"]. ToString ();
If (string. Compare (sortDir, sortDirection, true) = 0)
{
This. gvRestore. Sort (sortEx, SortDirection. Ascending );
SortDirection = "DSAC ";
}
Else
{
This. gvRestore. Sort (sortEx, SortDirection. Descending );
SortDirection = "ASC ";
}
ResponseData (this. gvRestore );
}
}

Private bool hasKeyName (string key)
{
String [] keys = Request. QueryString. AllKeys;
Foreach (string str in keys)
{
If (String. Compare (key, str, true) = 0)
Return true;
}
Return false;
}

Private void ResponseData (GridView gv)
{
Gv. performanceid = this. sqlperformance1.id;
System. Globalization. CultureInfo info = new System. Globalization. CultureInfo ("ZH-CN", true );
System. IO. StringWriter sWriter = new System. IO. StringWriter (info );
System. Web. UI. HtmlTextWriter html = new HtmlTextWriter (sWriter );
Gv. DataBind ();
If (gv! = Null)
{
Gv. RenderControl (html );
}
Response. Write (html. InnerWriter );
Response. Write (GetNav (gv. PageCount ));
Response. Flush ();
Response. End ();
}

Public string GetNav (int pagesize)
{
String NavStr = @"

";For (int I = 0; I <pagesize; I ++){NavStr = NavStr + @" ";}NavStr = NavStr + @"

"+ (I + 1). ToString () + @" | "+ @"

";
Return NavStr;
}

Public override void VerifyRenderingInServerForm (Control control Control)
{
// Base. VerifyRenderingInServerForm (control );
}
Protected void gvRestore_PreRender (object sender, EventArgs e)
{
This. gvRestore. Visible = false;
}