Trying basic table example in html but table disappears

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