Anubhav Dhawan Anubhav Dhawan -4 years ago 174
jQuery Question

Datatables not working with Meteor

I'm trying to include a Datatable in a Meteor app, but getting this error:

Uncaught TypeError: $(...).DataTable is not a function(…)


Inside my
client/
folder, in the
main.html
file, I have this minimal code:

<head>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.css">
</head>
<body>
<table id="tableId"></table>
<script>
$(document).ready(function () {
$('#tableId').DataTable();
});
</script>
</body>


Here's a demo of my problem

PS - when I run the HTML file itself (without Meteor), I don't get this error. So, is it something wrong between Datatable and Meteor, or am I missing something here?

Update



It seems that adding this meteor package solves the problem.

Great! But wait a minute, this package just adds a single library file, namely, jquery.dataTables.min.js, the same file that I have been adding this whole time!

<script src="http://cdn.datatables.net/1.10.13/js/jquery.dataTables.js"></script>


I guess, now the question is, what magic does this package do, while injecting the js file?

Answer Source

Your problem is that you do not have enough information either in the table definition or the datatable function. I made one change and it started working.

<table id="tableId"><thead><tr><th>d</th></tr></thead><tbody></tbody><tfoot></tfoot></table>

you have to give at least one column

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download