Jquery Datatables in Ember 2.0 app

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) {

in my component’s template.hbs

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

**then i used the component like **

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

I would appreciate a demo accompanied with answers.

cheers :sunglasses:

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() {
1 Like

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.