XF 2.1 Uncaught ReferenceError using DataTables in XF 2.1

[NinaMcI]

I've upgraded from XF 1.5 to XF 2.1 on a test installation of my site. Some of my page nodes have tables built using DataTables. The tables display fine on my xf 1.5 installation, but not on the XF2 - I'm getting the following errors:

Uncaught ReferenceError: $ is not defined (index)

datatables.min.js:30 Uncaught ReferenceError: jQuery is not defined
at datatables.min.js:30
at datatables.min.js:30

I've included the following HTML on my page:

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>

jQuery:
$(document).ready( function () {
$('#table_id').DataTable();
} );

Can anyone help?

 

[NinaMcI]

I'm having problems using DataTables on a XF 2.1 installation. For example, the following code in a page node:

<style><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css"></style>

<table id="table_id" class="display">
    <thead>
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Data 1</td>
            <td>Row 1 Data 2</td>
        </tr>
        <tr>
            <td>Row 2 Data 1</td>
            <td>Row 2 Data 2</td>
        </tr>
    </tbody>
</table>
<script>
    $(document).ready( function () {
    $('#table_id').DataTable();
} );
</script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>

Renders like this with no styling



Can anyone suggest why the table isn't rendering properly?

 

[liquidox]

Did you manage to fix this?