Why using jquery Datatables.js with asp.net gridview does not show table controls?

Question

Here is the html code:

I try to use with jquery datatable plug. My problem is that the controls get not rendered/displayed.

                 <asp:GridView ID="GridView1" runat="server" OnPreRender="GridView1_PreRender" AutoGenerateColumns="false" CssClass="table table-bordered table-striped">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" HeaderStyle-Width="15%" />
                <asp:BoundField DataField="Straße" HeaderText="Straße" HeaderStyle-Width="15%" />                    
                <asp:BoundField DataField="Ort" HeaderText="Ort" HeaderStyle-Width="15%" />
                <asp:BoundField DataField="Postleitzahl" HeaderText="Postleitzahl" HeaderStyle-Width="15%" />
                  <asp:BoundField DataField="Flag1" HeaderText="Flag1" HeaderStyle-Width="15%" />
                <asp:BoundField DataField="Flag2" HeaderText="Flag" HeaderStyle-Width="15%" />
                <asp:BoundField DataField="Adresstyp" HeaderText="Adresstyp" HeaderStyle-Width="40%" />                    
            </Columns>
             </asp:GridView>

Here is the html code with hte jquery code and the imports:

      <!-- jQuery 2.1.3 -->
<script src="../../plugins/jQuery/jQuery-2.1.3.min.js"></script>
<!-- Bootstrap 3.3.2 JS -->
<script src="../../bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<!-- DATA TABES SCRIPT -->
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js" type="text/javascript"></script>
<!-- SlimScroll -->
<script src="../../plugins/slimScroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<!-- FastClick -->
<script src='../../plugins/fastclick/fastclick.min.js'></script>
<!-- AdminLTE App -->
<script src="../../dist/js/app.min.js" type="text/javascript"></script>
<!-- AdminLTE for demo purposes -->
<script src="../../dist/js/demo.js" type="text/javascript"></script>
<!-- page script -->

 <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
         $(".GridView1").dataTable({
             "bPaginate": true,
             "bLengthChange": false,
             "bFilter": false,
             "bSort": true,
             "bInfo": true,
             "bAutoWidth": false
         });
     });
  </script>

Here is my first code behind which is called on prerendering:

    Protected Sub GridView1_PreRender(sender As Object, e As EventArgs)
    ' You only need the following 2 lines of code if you are not 
    ' using an ObjectDataSoturce of SqlDataSource
    GridView1.DataSource = table1
    GridView1.DataBind()

    If GridView1.Rows.Count > 0 Then
        'This replaces <td> with <th> and adds the scope attribute
        GridView1.UseAccessibleHeader = True

        'This will add the <thead> and <tbody> elements
        GridView1.HeaderRow.TableSection = TableRowSection.TableHeader

        'This adds the <tfoot> element. 
        'Remove if you don't have a footer row
        GridView1.FooterRow.TableSection = TableRowSection.TableFooter
    End If

End Sub

Here is the code behind for the asp:button which shall populate the gridview.

Protected Sub Button1_Click(sender As Object, e As EventArgs) Handles EinschlitzsucheButton.Click



Dim x3 As XmlElement = SearchService.FindAddressesBySearchtext(login, pass, Einschlitz.Text.ToString, False)


table1 = xmltogridview(x3)
GridView1.DataSource = table1
GridView1.DataBind()

If GridView1.Rows.Count > 0 Then
    'This replaces <td> with <th> and adds the scope attribute
    GridView1.UseAccessibleHeader = True

    'This will add the <thead> and <tbody> elements
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader

    'This adds the <tfoot> element. 
    'Remove if you don't have a footer row
    GridView1.FooterRow.TableSection = TableRowSection.TableFooter
End If












End Sub

I tried everything to put the data into the jquery datatables plugin, but every time the controls are missing. Im not fixed on a special method, I can convert my data into Strings, rows, what whatever you want, I need a workaround.

You have this jQuery selector: $(".GridView1") but no corresponding DOM element with a class of GridView1 so that selector would appear to select nothing. — Trott
– Trott, Commented May 13, 2015 at 18:53
the Bootrsap template I use had an old version of the datatable plugin. I changed it to the newest version. Now I use the asp gridview without any of the methods and can easily bind a datatable to it. — steve
– steve, Commented May 15, 2015 at 6:35

Trott · Accepted Answer · 2015-05-15 13:07:16Z

1

(Original poster supplied answer as a comment. Cutting/pasting it here where it belongs.)

The Bootstrap template I use had an old version of the datatable plugin. I changed it to the newest version. Now I use the asp gridview without any of the methods and can easily bind a datatable to it.

answered May 15, 2015 at 13:07

Trott

70.6k27 gold badges184 silver badges218 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Why using jquery Datatables.js with asp.net gridview does not show table controls?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related