[How-To] Install DataTables with Meteor JS + Bootstrap 3
[How-To] Install DataTables with Meteor JS + Bootstrap 3
mansarip
Posts: 1Questions: 0Answers: 0
Hi, I decided to write about the process how I successfully installed DataTables with MeteorJS.
In my case :
- Meteor version 1.4.3.2 (as for March 2017)
- Installed via npm
- Bootstrap 3 - Note that, I'm not using the default styling
DataTables is a jQuery plugin, thus, there's a trick to bind the plugin with the existing jQuery that comes with Meteor. I'm using import as this example is in ES6.
Installation
Step 1 :
Install DataTable core via npm : npm install --save datatables.net
Step 2 :
Install DataTable Bootstrap via npm : npm install --save datatables.net-bs
Step 3 :
Import datatable core and datatable bootstrap into you file. For example, you can write like this :
import datatables from 'datatables.net';
import datatables_bs from 'datatables.net-bs';
import 'datatables.net-bs/css/dataTables.bootstrap.css';
The third line is where I import the css for datatable bootstrap.
Step 4 :
Bind the "plugin" with jQuery, within the .onCreated(...) block :
datatables(window, $);
datatables_bs(window, $);
If you're working inside the body template, then, the code will look something like this :
Template.body.onCreated(function(){
datatables(window, $);
datatables_bs(window, $);
// rest of your code
});
Usage
Let's say this happen inside your body template (body tag).
HTML :
<body>
<table id="mytable" class="table table-hover table-bordered">
<thead>
<tr>
<th>Column Header 1</th>
<th>Column Header 2</th>
<th>Column Header 3</th>
<th>Column Header 4</th>
</tr>
</thead>
</table>
</body>
I recommend that we do the init inside .onRendered(...) block :
Template.body.onRendered(function(){
var data = [
['Data 1', 'Data 2', 'Data 3', 'Data 4'],
['Data 1', 'Data 2', 'Data 3', 'Data 4']
];
$('#mytable').DataTable({
data : data
});
});
That's all. It should be working now 
Replies
This isn't working for me on Meteor 1.6.0.1