为什么将 jquery Datatables.js 与 asp.net gridview 一起使用不显示 table 控件？

Question

这里是 html 代码：

我尝试使用 jquery 数据表插件。我的问题是控件没有 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>

这是带有 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:button 的隐藏代码，它将填充 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 数据表插件，但每次都缺少控件。我不固定在一个特殊的方法上，我可以将我的数据转换成字符串、行，无论你想要什么，我都需要一个解决方法。

Answer 1

（原发帖人提供的答案作为评论。Cutting/pasting 它在它所属的地方。）

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.

为什么将 jquery Datatables.js 与 asp.net gridview 一起使用不显示 table 控件？

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

html

asp.net

jquery

gridview

jquery-datatables