Use jQuery to implement GridView asynchronous sorting and paging code_jquery

Every time the backup management page is requested, the server will transmit all the backup and restore information to the client, and then ui.tabs will fold the two types of information and display them separately. Fortunately, ui.tabs provides me with the ajax function, and each of our A tab can be directly applied to another page
such as:

Copy the code The code is as follows:

• Backup< ;/span>


• Restore< /li>
  

But in this way, when Restore.aspx has a server-side control, when he interacts with the server For example, GridView comes with sorting and paging is impossible, because every time you interact, it will only display the status of the first time you load the tab (gridView may always display the first page), sometimes even filling the entire page.

To solve this problem, first think of using ajax to prevent all referenced pages from reloading. I tried UpdatePanel but it didn't work, so I thought of juery.

Below I will demonstrate how to implement asynchronous sorting and paging of GridView with jquery.

First of all, we also put a gridview on the page. It will not be used as the actual displayed part of the page, but as an auxiliary html output. When an ajax request comes, we use this GridView and Render is Html output, ajax callback function completes the display. In order not to display the GridView, I set Visible = false in PreRender. You cannot set Visible=false directly, otherwise it will not be rendered into html



Code

Copy code The code is as follows:

< ;input id="Radio1" type="radio" name="Restore" value='<%#Eval("operatePath") %>'/>Select< /label>

Note that we are in the onload of Body A function is specified in the event, which will request the server and return data when the page is loaded. It is an ajax request

The prototype is as follows:

Code

Copy 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. Specify the sorting field and sorting direction through the get method. The function is as follows:
Code

Copy code The code is as follows:

var sortDataGridView=function( sortExpression,sortDirection)
{
event.returnVaule=false;//Prevent submission server
$.ajax({
url:'Restore.aspx?' new Date() '&sortEx=' sortExpression '&sortDir=' sortDirection,//IE is cached, so add new Date() to prevent the impact of caching
type:'get',
success:function(data, textStatus)
{
$('#ShowData')[0].innerHTML=data;
},
error:function(XMLHttpRequest,textStatus)
{
$('#ShowData').text(XMLHttpRequest. responseText);
},
complete:function(XMLHttpRequest,textStatus)
{
}
});
}

when When clicking the HeadText in the GridView, we need to trigger the sortDataGridView to implement asynchronous sorting and view the original generated content of the GridView. It is actually an A mark
We are going to add an onclick event to this tag and remove the href attribute value to prevent PostBack to the server. Therefore, I do the following processing in the RowDataBound event of GridView:

Code

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

Go here In the first step, the idea is basically clear. The only thing left is to respond to the ajax request on the server side. It is very simple. Just look at the code directly. Note that the RendControl method of GridView is called to output html.



Now you can implement ajax sorting and paging of gridview. To summarize, the idea is actually very simple, but there are still some detours in the implementation. The main reason is that I originally wanted to use manual examples in the form of code. to a GridView, but it didn't work out in the end because I added a template column. Add an input type='Radio' in the template column. I inherit ITemplate when coding, but I don't know how to implement the binding of value='<%#Eval("operatePath") %>', leaving here a Question, if anyone knows, please tell me.

Copy code The code is as follows:

< label for="Radio1">select

Code

Copy 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.DataSourceID = this.SqlDataSource1.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)
{
//base.VerifyRenderingInServerForm(control);
}
protected void gvRestore_PreRender(object sender, EventArgs e)
{
this.gvRestore.Visible = false;
}