Table filled incorrectly HTML and Java script

Question

I have the following situation, when I enter the data from the database, my table is populated as follows:

And this message appears: "No data available in table", as if the data that are inserted were not for the table.

The HTML code is this:

<table id="dataTable" class="table  table-condensed table-hover table-striped table-responsive">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                            <th>CNPJ</th>
                            <th>E-mail</th>
                            <th>Responsável</th>

                        </tr>
                    </thead>

                <tbody></tbody>                
             </table>

And the java script code is this:

$(document).ready(function() {

    $.ajax({
        url: 'http://localhost:8080/exemplo',
        data: {},
        dataType: "json",
            cache: false,
            success: function (data) {
            $.each(data, function (i, val) {
                var tr = "<tr>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +
                    "<td>"+ val.id + "</td>" +

                    "</tr>";
                $(tr).appendTo('tbody');

            });
        }
    });   
});

So the table functions like paging and searching also don’t work. But if I enter the data manually into the HTML between the tbody tags the table works normally. Does anyone know what it’s about?

Thanks in advance for the help.

Answer 1

You are using the component (jQuery Datatables) to "manage" the table data. However, lines are included manually. This data, including after Datatable startup, is not recognized by it. Maybe you haven’t noticed. But aside from the problem with the message, these lines are not taken into account in the page, sort or search.

Here is an example simple how the resources of the component should be used for the creation of new lines:

Applied to your problem without the Ajax request, because the code provided does not allow to reproduce this scenario.

var t = $('table').DataTable();
t.rows.add( [[ 
       "1",
       "João",
       "123.456",
       "teste@teste",
       "aaaaaaaaa"      
        ]
      ]).draw();

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="dataTable" class="table  table-condensed table-hover table-striped table-responsive">
                    <thead>
                        <tr>
                            <th>Código</th>
                            <th>Nome</th>
                            <th>CNPJ</th>
                            <th>E-mail</th>
                            <th>Responsável</th>

                        </tr>
                    </thead>

                <tbody></tbody>                
             </table>

However, when working this way, your system will lose performance when there are many records. Regardless of being using Ajax.

For large data volumes, I recommend using another component feature. Documentation here. However, it is worth remembering that in this way you will be passing the responsibility to control paging and sort to the server. So you’ll have a little more work.