jQuery Plugin (DataTables) only loads properly on page refresh

问题

I am having a problem with DataTables. When I go to the page with the table from a link on a different page, it will only load the HTML "text" version of the table with none of the formatting from the CSS and none of the JavaScript (sorting, search, etc.). However, when I refresh the page it will load perfectly. After searching for an answer to this problem I found out that my issue may be with JQm since it does not load the "entire" HTML code when switching between pages. I have moved my style and JavaScript tags all over the place but with no success. I am using the default example found on the DataTables website and have not changed any of their code.

I am new to jQuery and web development in general so if someone could help me with this I would really appreciate it. Also if there is anything else that I should change, I definitely want to learn about better techniques!

P.S. I am linking to this page simply by linking it to a button.

Here is my code:

<?php
require_once 'classes/Membership.php';
$membership = New Membership();

$membership->confirm_EventAdmin();
session_start();
$con = mysql_connect("mysql server","user","pass");
if(!$con){
    die('Could not connect: ' . mysql_error());
    }
mysql_select_db("clip_comp_server1", $con);

mysql_query("ALTER TABLE $_SESSION[adminEvent] ORDER BY Score DESC");

$query = "SELECT CandID,Score,Team FROM $_SESSION[adminEvent]";
$infoList = mysql_query($query);
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Event Scores and Rankings</title>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="/css/themes/CLIPTheme.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/clip_v1/DataTables-1.9.4/media/js/jquery.dataTables.js"></script>

<style type="text/css">
    h1 {
        text-align: center;
    }

    h4  {
        line-height: 1.5;
    }

    .ui-btn-active { color: white !important; background: none !important; background-color: #006600 !important;  }
    .ui-btn-inner {border: 0;}
</style>
<style type="text/css">
    @import "/clip_v1/DataTables-1.9.4/media/css/demo_table.css";
    @import "/clip_v1/DataTables-1.9.4/media/css/demo_page.css";
</style>
</head>
<body>

    <div data-role="page" data-theme="a" data-content-theme="a" id="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
    <div>
        <h1>Event Scores and Rankings</h1>
    </div>
    <!--a href="#" data-role="button" data-rel="back" data-icon="arrow-l" style="height: 80%"><span style="font-size: 1.75em">Back</span></a-->


        <div data-role="navbar" data-grid="c" class="ui-navbar ui-mini" role="navigation" style="border: 0;">
            <ul class="ui-grid-c">
                <li class="ui-block-a"><a href="eventRegister.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Registration</span></span></a></li>
                <li class="ui-block-b"><a href="teamAssigner.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-inline ui-btn-up-c"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Teams</span></span></a></li>
                <li class="ui-block-c"><a href="scoreDisplay.php" class="ui-btn ui-btn-inline ui-btn-up-c ui-btn-active" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Stats</span></span></a></li>
                <li class="ui-block-d"><a href="challengeContent.php" data-corners="false" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-theme="a" data-inline="true" class="ui-btn ui-btn-up-c ui-btn-inline"><span class="ui-btn-inner"><span class="ui-btn-text" style="font-size: 1.5em">Challenges</span></span></a></li>
            </ul>
        </div>
    </div>
    <div data-role="content" style="border: 0">     

          <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
        <thead>
          <tr>
            <th>ID</th>
            <th>Score</th>
            <th>Rank</th>
            <th>Team</th>
          </tr>
        </thead>
        <tbody>
          <?php
            $rank = 1;
            while ($index = mysql_fetch_row($infoList)) {
                echo "<tr class=\"odd gradeA\">";
                echo "<td class=\"center\">" . $index[0] . "</td>";
                echo "<td class=\"center\">" . $index[1] . "</td>";
                echo "<td class=\"center\">" . $rank . "</td>";
                echo "<td class=\"center\">" . $index[2] . "</td>";
                echo "</tr>";
                $rank = $rank + 1;
                if ($index = mysql_fetch_row($infoList)) {
                    echo "<tr class=\"even gradeA\">";
                    echo "<td class=\"center\">" . $index[0] . "</td>";
                    echo "<td class=\"center\">" . $index[1] . "</td>";
                    echo "<td class=\"center\">" . $rank . "</td>";
                    echo "<td class=\"center\">" . $index[2] . "</td>";
                    echo "</tr>";
                    $rank = $rank + 1;
                }
            }
          ?>          
        </tbody>
        <tfoot>
          <tr>
            <th>Candidate ID</th>
            <th>Score</th>
            <th>Rank</th>
            <th>Team Assignment</th>
          </tr>
        </tfoot>
      </table>
    </div>
    </div>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
    $('#example').dataTable();
} );
</script>
</body>
</html>

Thank you!