Table rendered but not showed

john_table · September 2019

hello,
i have a simple situation in which i draw a simple table from database with php;
something like echo "<tr>"; echo field; echo "</tr> ... the simplest case of a table, and it's ok;

then i use the jquery function

$(document).ready(function() {
    $('#mytable').DataTable();
} );

the table seems to be created but is not showed up, in the page an empty rectangle appears;

Inspecting the code i realized that a class named " table-loading" is added to the div containing the table, and if i remove it manually the table will appear normally.

I'm working editing a project made of several scripts and whatever, but the datatablesis linked as it is, so, my question is: is this a behaviour controllable by the Datatables ? where should i nedd to investigate further?

thanks for the help

kthorngren · September 2019

Without seeing it my guess is the HTML for the table is not valid. You can validate your generated page using the W3C Validator. If that doesn't help then we would need to see a link to your page or a test case to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

john_table · September 2019

the html of the table is valid, and as i said, just removing the class "table-loading" the table is correct, by the way this is the table html as it is :

<table id="mytab"  ">
    <thead>
        <tr>
            <th>ID </th>
            <th>name</th>
            <th>address</th>
            <th>other</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        <td>1</td>
        <td>name1</td>
        <td>addr1</td>
        <td></td>
        </tr>
        <tr>
        <td>2</td>
        <td>name2</td>
        <td>addr2</td>
        <td></td>
        </tr>
    </tbody>
</table>

kthorngren · September 2019

Looks like you have an extra " here: <table id="mytab" ">. Try removing the last one to look like this: <table id="mytab">.

Kevin

john_table · September 2019

that was not the problem ...
i just found a solution setting the attribute
"initComplete": [ jquesry function to remove that class]

it seems to work, do you think it's a good solution?

kthorngren · September 2019

Your table works fine without any changes (except the extra quote) here:
http://live.datatables.net/tolawidi/1/edit

You shouldn't need to remove that class. Have you checked to make sure you aren't getting errors in your browser's console? I suspect that if you are removing that class then Datatables is probably not loading correctly and you won't have features like sorting and searching.

Maybe you can slowly build up my example with your solution to find the problem.

Kevin

kthorngren · September 2019

Just noticed something else. You have $('#mytable').DataTable(); but your table id is <table id="mytab">. They selector needs to match.

Kevin

john_table · September 2019

sorry for the id, it is correct, i just copied wrong part of code;
removing that class table is shown correctly, with filters, search and everything...

i think it must be something in all those script used in the whole application, there must be something "overriding" the normal datatables functions but I can't figure out what.

I'll keep this workaround and hope it will work

Table rendered but not showed

Table rendered but not showed

Answers

Howdy, Stranger!

Categories

DataTables

Table rendered but not showed

Table rendered but not showed

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables