locked
Gridview sorting and paging RRS feed

  • Question

  • 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

  • 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
  • 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