B. Clay Shannon B. Clay Shannon - 2 months ago 17
jQuery Question

Why does adding DataTables break my page?

I've got a working page with four quadrants; three contain Chart.JS charts, and the other contains an HTML table.

I added DataTables to the page with these references:

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />


Then I gave the html table an ID:

<table id="delperfTable">


And finally added the DataTablesification jQuery to the ready function:

$(document).ready(function () {
$('#delperfTable').DataTable();
. . .


..and that causes three of the four quadrants to go blank (ironically, the HTML table quadrant is the only unaffected - either positively or negatively - by adding that line).

Chrome Dev Tools points to that last line of code shown, complaining "Uncaught TypeError: $(...).DataTable is not a function"

?!? I'm referencing datatables, as shown, and jQuery, too; here are all my css and jquery references:

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.1.3/Chart.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Data Tables -->
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" />
<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />


What would make that happen? Some anomaly in my HTML table? It generates fine with "$('#delperfTable').DataTable();" commented out...

Here is the HTML table in greater context, although, based on the console error, I don't think my table's structure is really the issue:

<div class="col-md-6">
<div class="bottomright">
<h2 class="sectiontext">Delivery Performance</h2>
<table id="delperfTable">
<tr>
<th>PRO*ACT Distributor</th>
<th>Restaurant Location</th>
<th class="rightjustifytext">Avg Order Amount</th>
<th class="rightjustifytext">Avg Package Count</th>
<th class="rightjustifytext">Total Sales</th>
</tr>

<tr>
<td>Sunrise FL</td>
<td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
<td class="rightjustifytext">$475.78</td>
<td class="rightjustifytext">28.50</td>
<td class="rightjustifytext">$1,903.10</td>
</tr>
. . .
</table>
. . .
</div>
</div>


UPDATE



My reference to the javascript is now:

<script href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>


...and my table is now:

<table id="delperfTable">
<thead>
<tr>
<th>PRO*ACT Distributor</th>
<th>Restaurant Location</th>
<th class="rightjustifytext">Avg Order Amount</th>
<th class="rightjustifytext">Avg Package Count</th>
<th class="rightjustifytext">Total Sales</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sunrise FL</td>
<td>A1A ALEWORKS - #4405 - ST. AUGUSTINE</td>
<td class="rightjustifytext">$475.78</td>
<td class="rightjustifytext">28.50</td>
<td class="rightjustifytext">$1,903.10</td>
</tr>
<tr>
. . . // table rows elided for brevity
</tr>
<tr class="bold">
<td>TOTAL</td>
<td></td>
<td class="rightjustifytext">375.11</td>
<td class="rightjustifytext">23.50</td>
<td class="rightjustifytext">$7,966.68</td>
</tr>
</tbody>
</table>


Yet it still looks as plain vanilla as ever - it doesn't seem to have been datatablized:

enter image description here

In fact, "turning on" DataTable this way:

$(document).ready(function () {
$('#delperfTable').DataTable();
$("body").on("click", "#btnGetData",
. . .


...causes other parts of my page to fail (Chart.JS charts don't even display at all); commenting out "$('#delperfTable').DataTable();" causes all else to work again, even though, of course, no change is made to the html table.

UPDATE 2



If I move the "$('#delperfTable').DataTable();" to the very last thing inside the ready function, it doesn't break the rest of the code; but it still does nothing.

I still see the "Uncaught TypeError: $(...).DataTable is not a function" err msg in the console.

Answer

Scripts are included using a <script> tag, not a <link>

<link href="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js" />

should be this:

<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>