bootstrap datatable javascript doesn't work in asp.net Repeater

Question

This is my simple html code for bootstrap datatable

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

It show like this

But when I add this table into asp.net Repeater like

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

the function such as Paging,Search and Sorting in datatable doesn't work .
How can I fix that ?

CMedina · Accepted Answer · 2016-06-30 19:58:02Z

Your code returns more than one tag <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>

Exclude tag <tbody> , </tbody> from <ItemTemplate> and add tag <tbody> in <HeaderTemplate>; in <FooterTemplate>, something like this:

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

Collectives™ on Stack Overflow

bootstrap datatable javascript doesn't work in asp.net Repeater

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