Search, sort arrow, and pagination not working with Datatables.Net Plugin (when it works on CodePen)

Question

Problem: The sort arrows, search bar, and pagnation features are not appearing on my live server (but some formatting such as making the table look professional is). I can post link if requested.

Code: (on live server not 100% working):

    </style>
    <script type="text/javascript" src="/media/js/site.js?_=7a5408ceb64d5d41e4b1bfb3712796ab"></script>
    <script type="text/javascript" src="/media/js/dynamic.php?comments-page=examples%2Fdata_sources%2Fdom.html" async></script>
    <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
    <script type="text/javascript" class="init"></script>

<script type="text/javascript">
$(document).ready( function () {
    console.log("Jquery ready");
      $('#example').dataTable( {
      });
});     
  </script>
</head>

<table id="example" class="display" style="width:100%">
<thead>
   <tr>
      <th>
         <a class="column_sort" id="id" href="?order=id&sort=<?php echo $sort; ?>">
            ID</a>
      </th>
      <th><a class="column_sort" id="first_name" href="?order=first_name&sort=<?php echo $sort; ?>">First Name
      </a>
      </th>
      <th><a class="column_sort" id="last_name" href="?order=last_name&sort=<?php echo $sort; ?>">Last Name
         </a>
      </th>
      <th><a class="column_sort" id="position" href="?order=position&sort=<?php echo $sort; ?>">Position
         </a>
      </th>
      <th class="hidden-xs"><a class="column_sort" id="date" href="?order=date&sort=<?php echo $sort; ?>">Date
         </a>
      </th>
      <th class="hidden-xs">
         <a class="column_sort" id="updated" href="?order=updated&sort=<?php echo $sort; ?>">
            Updated</a>
      </th>
      <th>Action</th>
</thead>
</tr>

Possible solutions: I attempted to take out the <a> in <th><a>ID</a></th>. I figured that the "a" tag could cause issues with the Jquery Plug-in. However, nothing happened. This scenario confuses me because I am using the exact same code from codePen (which is working).

EDIT- Error message found (in console): I just found this error in the console which is most likely the problem:

"Refused to apply style from [websiteLink] because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled."