Jquery Datatables in Ember 2.0 app

Ember Data
1

I picked up learning emberJS lately and I have had issues doing some basic things I would have done while not using this framework. The main issues I have had was using jquery plugins, in this case jquery datatables

in my component’s component.js

import Ember from 'ember';
export default Ember.Component.extend({
	didInsertElement: function(model){
		Ember.run.scheduleOnce('afterRender', this, function(model) {
			this.$(".datatables").DataTable();
		});
	}
});

in my component’s template.hbs

<table class="table table-hover datatables">
	<thead>
		<tr>
			<th>Course Name</th>
			<th>Course Title</th>
			<th class="text-center">Actions</th>
		</tr>
	</thead>
	<tbody>
		{{#each courses as |course|}}
		<tr>
			<td> {{ course.name }} </td>
			<td> {{ course.title }} </td>
			<td  class="text-center"> {{#link-to 'courses.edit' course }} Edit {{/link-to}} </td>
		</tr>
		{{/each}}
	</tbody>
</table>

**then i used the component like **

{{#course-datatable courses=model}}{{/course-datatable}}

I would appreciate a demo accompanied with answers.

cheers :sunglasses:

2

What’s the issue you’ve been having with this?

I have a component using datatables (but I’m using remote data, never local data), and the difference I can see is that my didInsertElement does not schedule an afterRender, but other than that your code seems fine.

didInsertElement() {
    this.$('.my-table').DataTable({ 
      //options
    });
}
1 Like
3

Hi! @corrspt I removed the afterRender and still doesnt work properly.

##My Observation

The dataTables plugin had already been called before the model hook returns data from the store. So I was thinking if there is an event handler for this.

cheers