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 `` tags are confusing datatables.js. — ourmandave, Dec 10 '18 at 12:49
Actually, how are you adding the row? Datatables.js has a `row.add()` api. https://datatables.net/examples/api/add_row.html — ourmandave, Dec 10 '18 at 13:01
Even if I add a row using static HTML as follows: and no data the problem occurs. — user3656651, Dec 10 '18 at 13:12
If i add to the table, buttons don't show. If I remove this, the buttons show. — user3656651, Dec 10 '18 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, Dec 10 '18 at 13:19
There's also this long list of answers about how to add a row using jquery, but they aren't using datatables.js. https://stackoverflow.com/questions/171027/add-table-row-in-jquery — ourmandave, Dec 10 '18 at 13:23

score 1 · Accepted Answer · answered Dec 10 '18 at 15:30

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.

jQuery DataTable buttons not showing when a table row is added

1 Answers1