Trying basic table example in html but table disappears

Trying basic table example in html but table disappears

GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0
edited February 2020 in Free community support

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 -->

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0
    edited 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>
    
  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

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

    Kevin

  • GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0

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

  • GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0
    edited 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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

    Colin

  • GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    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

  • GabeTheGreatGabeTheGreat Posts: 7Questions: 1Answers: 0

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

This discussion has been closed.