Table filled in incorrectly HTML and Java script

Question

Table filled in incorrectly HTML and Java script

Navigation

#1 by (1 votes)

0

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

Andthismessageappears:"No data available in table", as if the data that is 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');

            });
        }
    });   
});

Soon the table functions like pagination and search also do not work. However if I enter the data manually in the HTML between the tbody tags the table works normally. Does anyone know what this is about?

Thanks for the help right away.

javascript html ajax jquery-datatables

asked by anonymous 13.02.2017 / 21:30

1 answer

How to sort random array in PHP Open text file and handle by line

score 1 · Accepted Answer

You are using the jQuery (DataTables) component to "manage" the table data. But lines are included manually. This data, including after the initialization of the DataTable, is not recognized by it. Maybe you have not noticed. But beyond the problem with the message, these lines are not taken into account in the page, sort or search.

Here is a simple example of how component resources should be used to create new lines :

Applied to your problem without the Ajax request, because the code provided does not allow you 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><scriptsrc="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>

But by working this way, your system will lose performance when there are too many records. Regardless of whether you are using Ajax.

For large volumes of data, I recommend using another feature of the component. Documentation here . However, it is worth remembering that this way you will be passing the responsibility of controlling the pagination and ordering the server. Porting will have a little more work.