Datatable as Component not working

1

Hi :smile: I create a component

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'table',
  classNames: ['table','table-hover','dataTable'],

  _didInsertElement: function() {
    this.$().dataTable();
  }.on('didInsertElement')

});

And I type: bower install --save datatables

My brocfile

app.import("bower_components/bootstrap/dist/css/bootstrap.min.css");
app.import("bower_components/jquery/dist/jquery.min.js");
app.import("bower_components/datatables/media/js/jquery.dataTables.js");
app.import("bower_components/datatables/media/css/jquery.dataTables.css");
app.import("bower_components/bootstrap/dist/js/bootstrap.min.js");

And I type in template:

{{#data-wrapper}}
    <thead>...</thead>
<tbody>....</tbody>
{{/data-wrapper}}

My data in table is showed, but without datatables features. What do I wrong ?

2

I think it’s this.$().DataTable(); instead of this.$().dataTable();.

1 Like
3

I think it is besause the datatable is rendered not in ‘render’ run queue. Perhaps you should declare the option lazy to false on datatables. Or try running the rendering like:

Ember.run.schedule('render', this.$().datatables)

Or

Ember.run.schedule('afterRender', this.$().dataTables)

Or something like this, i do not remember the exact syntax. What is the Ember version?

4

I did some tests today so here are some results. So if you use un ember template to create a table html you will have to apply the datatables framework on the table after it has been rendered. If you do just call datatables in didInsertElement, it will not work because there is no html table yet, you fan check the dom state in this hook. So call datatables in afterRender queue. Just to share my experience, i do not use ember to render the html table, i let it do to datatables so i pass the data in the options and it work fine without afterRender complications. As another pro of this approach is that i can tell datatables to render itself lazily, so only active page will be rendered eagerly, the rest will be on page changings. Recently, tried ember 1.13.beta.1 and datatables disappeared from my app. -(((. First i thought it was because of the lazy rendering, my reasoning was that with the virtual dom the glimmer prevents it somehow from rendering. But it turned out to be more streightforward. It seems that with 1.13 the component’s didInsertElement is called after the component has been fully initialized so if it has computed fields or observers they will be called first. And in my case in observers i manipulated the datatables object itself which was null in this case. So just added checks if not null and tables reappeared!!! Magic. Well there are yet some caveats but it will be for the next time