1

I am using ember-datatables addon which is based on jquery Datatables. I have created one datatables as per their guidelines.

But I am chaning the data of table after some time and redrawing the table. Redrawing table do not delete previous data.

Here is Ember twiddle created by me. Also I am adding code below.

templates/application.hbs

<h1>Please find data table below</h1>
{{outlet}}
{{#data-table id="myTable"}}
  <thead>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Salary</th>
      <th>Position</th>
    </tr>
  </tfoot>
  <tbody>
    {{#each data1 as |data|}}
        <tr>
        <td>{{data.name}}</td>
        <td>{{data.salary}}</td>
        <td>{{data.position}}</td>
      </tr>
    {{/each}}
  </tbody>
{{/data-table}}

routes/application.js

import Ember from 'ember';

export default Ember.Route.extend({
  setupController: function() {
    Ember.run.later(this, function() {
      this.controller.set('data1', [{
        'name': 'John Smith 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Alex 1',
        'salary': '$2000',
        'position': 'developer'
      }, {
        'name': 'Leonardo 1',
        'salary': '$2000',
        'position': 'developer'
      }]);

      var api = new $.fn.dataTable.Api('#myTable');
      api.row.clear();

      api.draw();

    }, 5000);
  }
});

controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data1: [{
    'name': 'John Smith',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Alex',
    'salary': '$2000',
    'position': 'developer'
  }, {
    'name': 'Leonardo',
    'salary': '$2000',
    'position': 'developer'
  }]
});
murli2308
  • 2,976
  • 4
  • 26
  • 47
  • Unrelated but I'm trying to access the gitbub and it seems to be down github.com/mfcollins3/ember-datatables. I would recommand you to not incorporate into your project an unmaintained plugin. [npm](https://www.npmjs.com/package/ember-datatables) – Orelsanpls Nov 23 '17 at 14:41
  • I agree that it is not maintained. But It is in working condition. I will try for one more day. If didn't work then I will switch to another add-on. – murli2308 Nov 23 '17 at 15:12
  • 2
    i wouldn't use this addon either. it's fairly straightforward to implement a sortable table in ember. i would not wrap a jquery plugin for this task. there are all sorts of downsides to this approach – Christopher Milne Nov 23 '17 at 15:15
  • 1
    Use [ember-contextual-table](https://tubitak-bilgem-yte.github.io/ember-contextual-table/#/overview), very simple to use, here its [github](https://github.com/tubitak-bilgem-yte/ember-contextual-table). – ykaragol Nov 23 '17 at 19:00
  • [ember-contextual-table](https://tubitak-bilgem-yte.github.io/ember-contextual-table/#/overview) rocks! (Ok I admit; I'm one of the owners of ember-contextual-table; but nevertheless it will solve the problem of question asker). Some other addons; which can be used; are [ember-table](https://www.npmjs.com/package/ember-table) and [ember-light-table](https://www.npmjs.com/package/ember-light-table) – feanor07 Nov 24 '17 at 05:05

1 Answers1

1

You are getting TypeError: api.row.clear is not a function.

Changing from api.row.clear() to api.clear() is fixing your issue.

Consider avoiding this addon like mentioned in comments.

Ember Freak
  • 12,918
  • 4
  • 24
  • 54