JQuery Data-Tables + Ember Works Now

21

Did you ever find a resolution to this? I’m having the exact same problem.

22

Guys, Now I’m using Datatables with {{#each}} and it works fine with me maybe this because I’m using HTMLBars

23

Same here @msalahz although I should caveat that I had to observe my collection of models being displayed and make manually calls to rerender (I wanted my component to take a collection of models and column/property pairs to display the table rather than strictly as a wrapper with {{#each}} inside the wrapper defining the table rows.

24

@mistahenry, I use this component

import Ember from 'ember';
let defaultOption = {paging: true, searching: false, responsive: true, data: [], columns: []};
export default Ember.Component.extend({
  tagName: 'table',
  classNames: ['table', 'table-bordered', 'table-striped', 'dataTable'],
  tableCreated:null,//action
  model: null,//property used to fire didUpdateAttrs when it's changed , it should contain model represented by table
  table: null,
  // functions
  initTable(){
    if (!this.get('oldModel') || this.get('model') != this.get('oldModel')) {
      let data = this.get('data');
      let component = this;
      let properties = component.getProperties('columns', 'data', 'order', 'emptyMessage', 'refresh', 'searching', 'paging', 'ordering', 'info');
      let table = component.get('table');
      let options = {};
      if (table) {
        table.clear().destroy();
      }
      if (!Ember.isNone(properties.data)) {
        options = Ember.copy(defaultOption);
        if (!Ember.isEmpty(properties.columns)) {
          options.columns = properties.columns;
        }
        if (!Ember.isEmpty(properties.data)) {
          options.data = properties.data;
        }
      }
      if (!Ember.isEmpty(properties.order)) {
        options.order = properties.order;
      }
      if (!Ember.isEmpty(properties.emptyMessage)) {
        options.oLanguage = {
          "sEmptyTable": properties.emptyMessage
        };
      }
      if (!Ember.isEmpty(properties.paging)) {
        options.paging = properties.paging;
      }
      if (!Ember.isEmpty(properties.searching)) {
        options.searching = properties.searching;
      }
      if (!Ember.isEmpty(properties.ordering)) {
        options.ordering = properties.ordering;
      }
      if (!Ember.isEmpty(properties.info)) {
        options.info = properties.info;
      }

      Ember.run.later(function () {
        if(component.get('model')){
          component.set('oldModel',component.get('model'))
        }
        table = component.$().DataTable(options);
        component.set('table', table);
        component.sendAction('tableCreated');
      });
    }else{
      this.sendAction('tableCreated');
    }
  },
  // hooks
  didInsertElement() {
    this.initTable();
  },
  didUpdateAttrs(){
    this.initTable();
  }
});
25

but i didn’t figure a solution for integrate with databases pagination

26

I am new to Ember, can you please let me know the steps to use Jquery datatable…any video or code samples are welcome. I am using Ember cli 2.8…

27

@Prabasini, I would recommend using one of the following ready ember addons for tables so check the following link for the list of them Ember Observer FYI, Integrating datatable into ember was a mess and we are going for http://offirgolan.github.io/ember-light-table/

28

Thank you @msalahz for quick response… no filter and pagination control in ember-light-table…Also i checked other tables(ember-model-table , fixtable etc) it won’t work in 2.8. Let me know if you have implemented responsive grid control in latest Ember version with paging sorting & filtering

29

Hi @Prabasini, Unfortuantly i didn’t so I have two recommendations for you 1- Check this out GitHub - ibarrick/paper-data-table: Material Data Table for ember-paper it have sort and paging and filters can be done by yourself
2- These videos will help you build your own and it have it’s code attached Video List- EmberScreencasts

30

thank you @msalahz !!!

1 Like