Trying basic table example in html but table disappears

GabeTheGreat · February 2020

Hi all,
So I have an html page with a table in the header. Further down I'm using the example presented in the datatable main page. When I load the page, my table displays for about half a second, then it disappears... everything else displays ok... can anybody help? here's my code for that particular section...

<!-- Start of loads page -->
<div data-role="page" id="loads">

    <div data-role="header">
    <a href="#main" data-transition="slide" data-direction="reverse" class="ui-btn"><</a>
        <h1>Loads</h1>
    </div><!-- /header -->


    <div role="main" class="ui-content">

    <p>This Text is above the table...</p>
    <p>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#table-loads').DataTable();
    } );
</script></p>
<p>This is below the table...</p>

    </div><!-- /content -->


    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->

kthorngren · February 2020

Its hard to say why the table disappears without actually seeing the page. There must something else on your page that is hiding or removing the table. Can you post a link to your page or a test case replicating the problem so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

GabeTheGreat · February 2020

Thank you for your reply. Heres the full html code....

<!DOCTYPE html>
<html>
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="css/jquery.mobile-1.4.5.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.4.5.js"></script>
<link rel="stylesheet" type="text/css" href="/DataTables/datatables.css">
<script type="text/javascript" charset="utf8" src="/DataTables/datatables.js"></script>

<table id="table-loads" class="display">
    <thead>
        <tr>
            <th>Trip Number</th>
            <th>Begin Date</th>
            <th>End Date</th>
            <th>From</th>
            <th>To</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0001</td>
            <td>01.01.2020</td>
            <td>01.04.2020</td>
            <td>Fruitland, ID</td>
            <td>Grand Island, NE</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>01.05.2020</td>
            <td>01.07.2020</td>
            <td>Grand Island, NE</td>
            <td>Burley, ID</td>
        </tr>
    </tbody>
</table>

</head>



<body>

<!-- Start of main page -->
<div data-role="page" id="main">

    <div data-role="header">
        <h1>TripPack Tracker</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">

<a href="#contact" class="ui-btn" data-transition="slide"></a>

        <div data-role="collapsible" data-theme="b" data-content-theme="b">
<h2>Main Menu</h2>
    <ul data-role="listview">
        <li><a href="#loads">Loads</a></li>
    </ul>
</div>

    </div><!-- /content -->

    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->



<!-- Start of loads page -->
<div data-role="page" id="loads">

    <div data-role="header">
    <a href="#main" data-transition="slide" data-direction="reverse" class="ui-btn"><</a>
        <h1>Loads</h1>
    </div><!-- /header -->

    <div role="main" class="ui-content">

    <p>This Text is above the table...</p>

    <p>
    <script type="text/javascript">
    $(document).ready(function() {
    $('#table-loads').DataTable();
    } );
</script></p>

<p>This is below the table...</p>

    </div><!-- /content -->


    <div data-role="footer" data-position="fixed">
        <h4></h4>
    </div><!-- /footer -->
</div><!-- /page -->



</body>

</html>

kthorngren · February 2020

It doesn't look like you are loading jquery.js. See the Dependencies section of the Install Manual.

Kevin

GabeTheGreat · February 2020

its on line 9 of my code …
do I need to add it into another section?

GabeTheGreat · February 2020

ok, I downloaded jquery-3.4.1-min.js and put it in my js folder. Then I added this between lines 9 and 10 of my original code...

<script src="js/jquery-3.4.1.min.js"></script>

still no change, it still disappears... thanks for the responses so far. I appreciate your help.

colin · February 2020

Are you seeing console errors? Can you provide a link to the page, please?

Colin

GabeTheGreat · February 2020

ok I uploaded it to sugarfreergv.com... still does the same thing ugh...

kthorngren · February 2020

The problem is not with Datatables but something that you are doing with the page. Could be the jquery.mobile-1.4.5.js library. When I inspect the page I see this:

It shows that the script tag containing the Datatable is set to display:none. Some code on your page is hiding the Datatable. Your code without the jquery.mobile-1.4.5.js works here:
http://live.datatables.net/duyuqoqe/1/edit

Yes, the layout and page flow is not the same but shows Datatables is working. You will want to use the jQuery Mobile support for help with setting up the page to work the way you want.

Also you only want to load jquery.js once and before all of the other libraries that require it. Sorry I missed it in your first post.

Kevin

GabeTheGreat · February 2020

Success! thx for your help.... I added the libraries from the DataTables folder you posted and it finally worked. Thx again

Trying basic table example in html but table disappears

Trying basic table example in html but table disappears

Answers

Howdy, Stranger!

Categories

DataTables

Trying basic table example in html but table disappears

Trying basic table example in html but table disappears

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables