Clever Geek Handbook

Ember js with datatables plugin

I am trying to use a datatable jquery plugin with Ember JS. It looks like the moment Ember tries to update the DOM with some fresh data, it got a problem after the datatable styled and inserted some elements like the search bar, twitter bootstrap paging footer, etc. The code looks like this

App.TableView = Em.View.extend({
    classNames:['table','table-striped','table-bordered','dataTable'],
    tagName:'table',
    didInsertElement:function (){
       this.$().dataTable({

           "sPaginationType": "bootstrap",
           "oLanguage": {
               "sLengthMenu": "_MENU_ records per page"
           }
       });
    }
});

The use in the steering wheel is as follows:

{{#view App.TableView }}
        {{view App.ListStaffView}}
 {{/view}}

The App.ListStaffView has

App.ListStaffView = Ember.View.extend({
  templateName:    'list',
  staffBinding: 'App.staffController',

  showNew: function() {
    this.set('isNewVisible', true);
  },

  hideNew: function() {
    this.set('isNewVisible', false);
  },

  refreshListing: function() {
    App.staffController.findAll();
  }
});

and the list template looks like this

<thead>
                        <tr>
                        <th>Name</th>
                        <th>Email</th>
                        </tr>
                        </thead>
                        <tbody>
                        {{#each staff}}
                        {{view App.ShowStaffView staffBinding="this"}}
                        {{/each}}
                        </tbody>

                        <tfoot>
                        <div class="commands">

                        <a class="btn btn-inverse" href="#"{{action "showNew"}}>
                            <i class="icon-plus"></i>
                        </a>
                        <a class="btn btn-inverse" href="#"{{action "refreshListing"}}>
                            <i class="icon-refresh"></i>
                        </a>

                        </div>
                        </tfoot>

The error after loading looks like this:

Error: Unable to perform metamorph operations

I did datatable-integrated zero-config integration and it failed. Since Ember cannot insert data into the DOM, the jQuery datatable keeps saying "No data"

+1


source to share


3 answers


Datatables will work fine in some expected DOM structure, in the same case for Ember. If you use both, one will change the other expected DOM structure. This is the cause of the problem.



If you decide to use Ember, use Ember widget libraries like flame.js for TableViews.

+1


source


I had the same problem and managed to get around this problem by calling rerender () on the view containing the table.

For example, in my opinion, I have a method called editRow () that changes the table text to be entered. This is how I did it:



    editRow: function (event)
    {
        var obj = event.context;
        obj.setIsEditing (true);
        this.rerender ();
    }
+1


source


You cannot use #each

Helper inside a table that will be overridden by the DataTables.

0


source






More articles:


All Articles