Integration of DataTables with Ember V.2.3.0

shankar29

Hi I just integrated the DataTables with Ember version 2.3.0 as mentioned in the manual. However i get an error
- Uncaught Type Error: this.$(...).DataTable is not a function.
Below is my Code

import Ember from 'ember';

export default Ember.Component.extend({
  didInsertElement: function(){
    Ember.run.scheduleOnce('afterRender', this, function() {
      this._super(...arguments);
      alert('Page Loaded');
      alert(this.$('#table_id'));
      this.$('#table_id').DataTable();
    });
  }
});

In the above code i get both the alerts as expected, but the line where i call to setup the datatables fails with the error stated above.

The coding for the component is as elow

<div class="row">
  <div class="col-xs-12">
    <div class="box">
      <table id="table_id" class="display">
          <thead>
              <tr>
                  <th>User ID</th>
                  <th>Email</th>
              </tr>
          </thead>
          <tbody>
              <tr>
                  <td>Row 1 Data 1</td>
                  <td>Row 1 Data 2</td>
              </tr>
              <tr>
                  <td>Row 2 Data 1</td>
                  <td>Row 2 Data 2</td>
              </tr>
          </tbody>
      </table>
    </div>
  </div>
</div>

Please let me know if i am missing anything.

Thanks
Shankar

allan

I just integrated the DataTables with Ember version 2.3.0 as mentioned in the manual

Could you link me to that page in the manual? The DataTables manual makes no mention of Ember anywhere.

The error you are seeing suggests that DataTables hasn't been attached to the jQuery instance being used. That might be because DataTables simply isn't being loaded or perhaps jQuery is being loaded multiple times.

Allan

shankar29

Hi Allan,

Thanks for the response!

My bad! Poor sentence formation on my part. Yes the manual makes no mention of it. What i meant was, I followed the instruction as given in the manual for integrating Data tables in my web pages but when i use it along with ember version 2.3.0, i get the error above. Of course it works nicely when i don't use ember but that's not an option for me hence trying to get it to work.

i just double checked and there exactly is only one version of jQuery being loaded. Is there a way where i can debug more to see what is going on?

Thanks
Shankar

allan

If you do console.dir( this.$.fn ); inside your scheduled function - what does it should in the console? It should show a list of all the jQuery methods and I'm going to guess that DataTables isn't one of them. The other possibility is that it shows undefined or similar in which case the issue is else where.

If you could link to a page showing the issue that would be useful.

Allan