Question

这是我用于bootstrap数据表的简单html代码

  <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                <thead>
                                    <tr>
                                        <th>Rendering engine</th>
                                        <th>Browser</th>
                                        <th>Platform(s)</th>
                                        <th>Engine version</th>
                                        <th>CSS grade</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr class="odd gradeX">
                                        <td>Trident</td>
                                        <td>Internet Explorer 4.0</td>
                                        <td>Win 95+</td>
                                        <td class="center">4</td>
                                        <td class="center">X</td>
                                    </tr>
                                    <tr class="even gradeC">
                                        <td>Trident</td>
                                        <td>Internet Explorer 5.0</td>
                                        <td>Win 95+</td>
                                        <td class="center">5</td>
                                        <td class="center">C</td>
                                    </tr>
                                </tbody>


           </table>
 <script src="../bower_components/jquery/dist/jquery.min.js"></script>
    <script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
    <script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
    <script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
    <script src="../dist/js/sb-admin-2.js"></script>
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
                responsive: true
        });
    });
    </script>

它表现得像这样

但是当我把这个表添加到像

这样的asp.net Repeater中时

  <asp:Repeater runat="server" ID="repeater_Event">
                            <HeaderTemplate>
                                <table class="table table-striped table-bordered table-hover" id="dataTables-example">
                                    <thead>
                                        <tr>
                                            <th>Title</th>
                                            <th>Date</th>
                                        </tr>
                                    </thead>
                            </HeaderTemplate>
                            <ItemTemplate>
                                <tbody>
                                    <tr class="odd gradeX">
                                        <td><%# Eval("event_title") %></td>
                                        <td><%# Eval("event_date") %></td>
                                    </tr>
                                </tbody>

                            </ItemTemplate>
                            <FooterTemplate>
                                </table>


                            </FooterTemplate>
                        </asp:Repeater>
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../bower_components/metisMenu/dist/metisMenu.min.js"></script>
<script src="../bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
<script src="../dist/js/sb-admin-2.js"></script>
<script>
$(document).ready(function() {
    $('#dataTables-example').DataTable({
            responsive: true
    });
});
</script>

数据表中的分页，搜索和排序等功能无法正常工作我该如何解决这个问题？

Answer 1

您的代码会返回多个代码<body>...</tbody>：

<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
   <tr>
      <th>Title</th>
      <th>Date</th>
   </tr>
</thead>
   <tbody>
      .....
   </tbody>
   <tbody>
      .....
   </tbody>
   <tbody>
     .....
   </tbody>
</table>

从<tbody>排除标记</tbody>，<ItemTemplate>，并在<tbody>＆gt;中添加标记<HeaderTemplate;在<FooterTemplate>，像这样：

<asp:Repeater runat="server" ID="repeater_Event">
     <HeaderTemplate>
        <table class="table table-striped table-bordered table-hover" id="dataTables-example">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody>
      </HeaderTemplate>
      <ItemTemplate>

            <tr class="odd gradeX">
                <td><%# Eval("event_title") %></td>
                <td><%# Eval("event_date") %></td>
            </tr>

       </ItemTemplate>
       <FooterTemplate>
            </tbody>                                
            </table>
       </FooterTemplate>
</asp:Repeater>

bootstrap datatable javascript在asp.net Repeater中不起作用

1 个答案: