Home > Others

JQuery implements the asynchronous sorting and paging functions of the GridView

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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, but this page will be bloated now, each time you request a backup Management page, 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:

Copy to ClipboardReference: [www.bkjia.com] <div id = "container">
<Ul>
<Li> <a href = "# fragment-1"> <span> Backup </span> </a> </li>
<Li> <a href = "Restore. aspx"> <span> Restore </span> </a> </li>
</Ul>
</Div>

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.

Copy to ClipboardReference: [www.bkjia.com] <body onload = "getPageData (1)">
<Form id = "form1" runat = "server">
<Div>
<Div id = 'showdata'>
<Asp: gridView id = "gvRestore" runat = "server" Width = "100%" PageSize = "5" performanceid = "sqlperformance1" AutoGenerateColumns = "False" AllowPaging = "True" OnRowDataBound = "gvRestore_RowDataBound "AllowSorting =" True "Height =" 138px "OnDataBound =" gvRestore_DataBound "OnPreRender =" gvRestore_PreRender "> <Columns>
<Asp: BoundField DataField = "ID" HeaderText = "ID" SortExpression = "ID" Visible = "False"> </asp: BoundField>
<Asp: BoundField DataField = "WorkId" HeaderText = "employee ID" SortExpression = "WorkId"> </asp: BoundField>
<Asp: BoundField DataField = "userName" HeaderText = "Operator name" SortExpression = "userName"> </asp: BoundField>
<Asp: BoundField DataField = "operateType" HeaderText = "Operation Type" SortExpression = "operateType"> </asp: BoundField>
<Asp: BoundField DataField = "operateWay" HeaderText = "Operation Method" SortExpression = "operateWay"> </asp: BoundField>
<Asp: BoundField DataField = "operateTime" HeaderText = "Operation Time" SortExpression = "operateTime"> </asp: BoundField>
<Asp: BoundField DataField = "operatePath" HeaderText = "Save path" SortExpression = "operatePath"> </asp: BoundField>
<Asp: BoundField DataField = "operateReason" HeaderText = "Operation Reason" SortExpression = "operateReason"> </asp: BoundField>
<Asp: TemplateField HeaderText = "select">
<ItemTemplate>
<Input id = "Radio1" type = "radio" name = "Restore" value = '<% # Eval ("operatePath ") %> '/> <label for = "Radio1"> select </label>
</ItemTemplate>
</Asp: TemplateField>
</Columns>
</Asp: GridView>
</Div>
<Asp: SqlDataSource id = "SqlDataSource1" runat = "server" SelectCommand = "SELECT * FROM [BackUpInfo] where operateType = 'backup '" ConnectionString = "<% $ ConnectionStrings: backUpConnectionString %> ">
</Asp: SqlDataSource>
</Div>
</Form>
</Body>

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:

Copy to ClipboardReference: [www.bkjia.com] 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: When you click HeadText in the GridView, We Need To trigger sortdatagrito Implement Asynchronous sorting and view the original content of the GridView. In fact, it is A tag <a href = "javascript: __dopostback ('gvrestore', 'sort $ workid') "> now we can implement ajax sorting and paging in the gridview. To sum up the ideas, it is actually very simple, however, the implementation still took a detour. I originally wanted to manually instantiate a GridView in the form of code, but it was 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.

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:

Copy to ClipboardReference: [www.bkjia.com] 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;
}
}
  • 2 pages in total:
  • Previous Page
  • 1
  • 2
  • Next Page

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More