Table rendered but not showed

Table rendered but not showed

john_tablejohn_table Posts: 4Questions: 1Answers: 0
edited September 2019 in Free community support

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

Answers

  • kthorngrenkthorngren Posts: 20,274Questions: 26Answers: 4,765

    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_tablejohn_table Posts: 4Questions: 1Answers: 0
    edited 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>
    
  • kthorngrenkthorngren Posts: 20,274Questions: 26Answers: 4,765

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

    Kevin

  • john_tablejohn_table Posts: 4Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,274Questions: 26Answers: 4,765

    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

  • kthorngrenkthorngren Posts: 20,274Questions: 26Answers: 4,765

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

    Kevin

  • john_tablejohn_table Posts: 4Questions: 1Answers: 0

    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

This discussion has been closed.