如何在ember cli项目中使用jquery数据表

Question

I'm working on an ember project where I'm using jQuery plugin data-tables. I've included the plugin in vendor folder and referencing it from ember-cli. So far so good, but I want to change the data in the table dynamically as per the user selection on the list. The way I implemented is

index.hbs
{{#data-table tHeaders=tHeaders elementId="myTableID" data=model}}
   {{#each model as |model|}}
        <tr>
            <td>{{#link-to "anotherRoute" model.id}}{{model.id}}{{/link-to}}</td>
            <td>{{ model.type }}</td>
            <td><button {{action 'openModal' model.config}}>{{ model.type }}</button></td>
        </tr>
    {{/each}}
{{/data-table}}

data-table.hbs
 <thead>
    <tr>
       {{#each tHeaders as |tHeaders|}}
          <th>{{tHeaders}}</th>
       {{/each}}
    </tr>
 </thead>
 <tbody>
       {{yield}}
 </tbody>

data-table.js
import Ember from 'ember';
export default Ember.Component.extend({
   tagName:'table',
   classNames:['table','table-bordered','table-striped','mb-none'],
   uiSetup: function(){
      $('#myTableID').DataTable();
   }.on('didInsertElement').observes('data.[]')
});

Whenever I click on my list (on left side of my page), I'm doing a transitionToRoute to the same route but the model changes since the id of the selected element changes.

When I selected different id on the left side, my model is changing and the datatable is reflecting the new data but with the existing data below to that. Now, when I click sort on the headers the table is resetting to the previous data by removing the latest data.

I've been on this issue since past 3 days but nothing is changing. The other way I approached to this problem is

index.hbs
{{data-table tHeaders=tHeaders elementId="myTableID"}}

data-table.hbs
 <thead>
    <tr>
       {{#each tHeaders as |tHeaders|}}
          <th>{{tHeaders}}</th>
       {{/each}}
    </tr>
 </thead>
 <tbody>
       {{yield}}
 </tbody>

data-table.js
import Ember from 'ember';
export default Ember.Component.extend({
   tagName:'table',
   classNames:['table','table-bordered','table-striped','mb-none'],
   uiSetup: function(){
    this._super(...arguments);
    var table=$('#myTableID').DataTable();
    table.clear();
    var JSON=[];
    for (var i = this.get('data.currentState').length - 1; i >= 0; i--)   {
        var innerJSON=[];
        innerJSON.push("<a {{{action 'link1Clicked' 123}}}>"+this.get('data.currentState')[i].id+"</a>");
        innerJSON.push(this.get('data.currentState')[i]._data.type);
        innerJSON.push("<button {{{action 'link2Clicked' 123}}}>"+this.get('data.currentState')[i]._data.config+"</button>");
        if (this.get('data.currentState')[i].id) {
            JSON.push(innerJSON);
        }
    }
    table.rows.add(JSON);
    table.draw();
}.on('didInsertElement').observes('data.[]'),
actions:{
   link1Clicked(){
      console.log('hello');
   }
}
});

For the second approach, everything is working fine but I could not capture action items since those elements were created dynamically and not treated as ember elements instead they are pure HTML elements.

Any idea, where I'm doing wrong or is there any much cleaner approach for using jQuery data tables in ember cli project.

I also tried using ember-cli-jquery-datatables addon which works only for static data but not for dynamic data.

Thanks in advance, any help would be appreciated.

Answer 1

I'm answering my own question.

For those who are facing the same problems in integrating jQuery data-table plugin, I'd suggest rather than putting your effort on fitting jQuery datatables plugin in to ember app, use ember-models-table add-on which is clearly in sync with ember data models. Its very simple to integrate,

1. ember install ember-models-table

2. Use it in any of your template/file as

    {{models-table data=model columns=columns}} 

3. Declare columns as an array in your component.js file as

    columns: [ { "propertyName": "id", "title": "ID" }, { "propertyName": "firstName", "title": "First Name" }, { "propertyName": "lastName", "title": "Last Name" }, { "propertyName": "city", "title": "City" } ] 

   There are many custom methods availabe with add on, for complete list of the features please refer to http://onechiporenko.github.io/ember-models-table