为什么使用asp.net gridview使用jQuery Datatables.js不显示表控件

Question

这是html代码：

我尝试与jQuery DataTable插头一起使用。我的问题是控件未被渲染/显示。

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

这是带有HTE jQuery代码和导入的HTML代码：

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

这是我背后的第一个代码，该代码被称为预备：

    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

这是ASP：按钮的背后代码，该按钮应填充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

我尝试将数据放入jQuery DataTables插件中，但是每次丢失控件时。我不是用特殊方法修复的，我可以将数据转换为字符串，行，无论您想要什么，我都需要解决方法。

Answer 1

（原始海报提供的答案作为评论。在此处将其切割/粘贴在此处。）

我使用的Bootstrap模板具有DataTable插件的旧版本。我将其更改为最新版本。现在，我使用ASP GridView而无需任何方法，并且可以轻松地绑定数据。