jQuery DataTable buttons not showing when a table row is added

Question

I have a strange code behavior that I want to understand. I have a page that has a simple html table in it, no data. I use DataTable to show export buttons. When I do not define any row in the table, the buttons show up correctly. But when I define a row withing the table, the buttons disappear. Why is that happening?

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Table Test</title>

    <script src="Scripts/jquery-3.3.1.js"></script>
    <link rel="stylesheet" type="text/css" 
href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css"/>

    <script type="text/javascript" charset="utf8" 
src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript" 
src="https://cdn.datatables.net/buttons/1.3.1/js/dataTables.buttons.min.js">

<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"></script>
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>

    <script>


        $(document).ready(function () {
            $('#table_id').DataTable({
                pageLength: 10,
                lengthChange: false,
                responsive: true,
                dom: 'Bfrtip',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]

            });

        });




    </script>

</head>
<body>

    <div>


        <table id="table_id" class="display">
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
            </tr>
        </thead>
        <tbody>


        </tbody>
        </table>
      </div>


</body>
</html>

As it is, this code shows the buttons above the column heading of the table. But if I add for example:

        <tbody>
          <tr><td></td></tr>

        </tbody>

to the table, the buttons disappear. What is wrong?

What's the generated datatable source look like before you add a row? Maybe the extra <tbody> tags are confusing datatables.js. — ourmandave
– ourmandave, Commented Dec 10, 2018 at 12:49
Actually, how are you adding the row? Datatables.js has a row.add() api. datatables.net/examples/api/add_row.html — ourmandave
– ourmandave, Commented Dec 10, 2018 at 13:01
Even if I add a row using static HTML as follows: <tr><td></td></tr> and no data the problem occurs. — user3656651
– user3656651, Commented Dec 10, 2018 at 13:12
If i add <tr><td></td></tr> to the table, buttons don't show. If I remove this, the buttons show. — user3656651
– user3656651, Commented Dec 10, 2018 at 13:16
Datatables keeps track of the rows internally so once it runs you got to use the api or apparently it gets confused. — ourmandave
– ourmandave, Commented Dec 10, 2018 at 13:19

user3656651 · Accepted Answer · 2018-12-10 15:30:21Z

2

I found the fix. It seems that the DataTable wants that the header of the table should be properly defined. If the number of columns in the table header will not match the number of columns in the table body, the buttons will not show. Once I did that, the table is displayed properly with print and export button bar at the top. So in this case, since two columns have been defined in the table header, the body should have two columns.

answered Dec 10, 2018 at 15:30

user3656651

8423 gold badges17 silver badges30 bronze badges

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

Collectives™ on Stack Overflow

jQuery DataTable buttons not showing when a table row is added

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related