Remove From My Forums

Gridview sorting and paging

Question
0

Sign in to vote

User1132714760 posted

Hi

I want to avoid page refresh for asp:gridview sort and pagination and I don't want to go with asp:scriptmanger.

can some one help me with code.

Thanks.

Thursday, January 31, 2019 9:33 PM

Answers

User-893317190 posted

Hi TejasviRebba,

If you want to use jquery datatable with gridview, you should pay attention to the format of gridview.

Below is a sample for converting gridview to jquery datatable.

<head runat="server">
    <title></title>
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
 
      <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
   
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
      <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:gridview runat="server" ID="gvw1" AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True" SortExpression="CustomerID" />
                <asp:BoundField DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName" />
                <asp:BoundField DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName" />
                <asp:BoundField DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle" />
                <asp:BoundField DataField="Address" HeaderText="Address" SortExpression="Address" />
                <asp:BoundField DataField="City" HeaderText="City" SortExpression="City" />
            </Columns>
        </asp:gridview>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString3 %>" SelectCommand="SELECT [CustomerID], [CompanyName], [ContactName], [ContactTitle], [Address], [City] FROM [Customers]"></asp:SqlDataSource>
    </form>
</body>
    <script>
        //format of datatable should be
     /*   <table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>*/
      //gridview's format is not suitable
        //so first use jquery to change the format of gridview and then convert gridview to jquery datatable


        $(function () {
            $("#gvw1").prepend(
                $("<thead></thead>").append($(this).find("tr:first"))
            ).dataTable(
                {
                "pageLength": 3  // limit the initial page length
                }
                );
        })
    </script>
</html>

The result.

Best regards,

Ackerly Xu

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

Friday, February 1, 2019 5:37 AM

All replies

0

Sign in to vote

User475983607 posted

There are several JavaScript API options. Probably the easiest is in web forms is the jquery DataTable.

There is a learning curve so you'll need to read the docs.

https://datatables.net/

Thursday, January 31, 2019 9:44 PM