1

I picked up learning emberJS lately and I have had issues doing some basic things I would have done while not using this framework. The main issues I have had was using jquery plugins, in this case jquery datatables

in my component's component.js

import Ember from 'ember';
export default Ember.Component.extend({
    didInsertElement: function(model){
        Ember.run.scheduleOnce('afterRender', this, function(model) {
            this.$(".datatables").DataTable();
        });
    }
});

in my component's template.hbs

<table class="table table-hover datatables">
    <thead>
        <tr>
            <th>Course Name</th>
            <th>Course Title</th>
            <th class="text-center">Actions</th>
        </tr>
    </thead>
    <tbody>
        {{#each courses as |course|}}
        <tr>
            <td> {{ course.name }} </td>
            <td> {{ course.title }} </td>
            <td  class="text-center"> {{#link-to 'courses.edit' course }} Edit {{/link-to}} </td>
        </tr>
        {{/each}}
    </tbody>
</table>

**then i used the component like :- **

{{#course-datatable courses=model}}{{/course-datatable}}

I would appreciate a demo accompanied with answers.

cheers

Riliwan Balogun
  • 308
  • 1
  • 2
  • 10

1 Answers1

1

Ok so i haven't done a component of the jquery datatable plugin. But yes for other Jquery plugins, it would be more or less like this. If you are building your own component: Add the Datatable js files to include inside your BrocFile

Run in ember client

ember g my-jquery-datatable

this will generate the component in the generated hbs fill in the general html you would use 

    <table id="example" class="display" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Position</th>

                </tr>
         </thead>
    {{#each modelWithData}}
    <tr>
    <td>this.name</td>
    <td>this.position</td>
    </tr>
    {{/each}}
</table>

then on you js generated file initiate the plugin in the didInsertElementMethod

export default Ember.Component.extend({
    didInsertElement(){
       this.$('#example').DataTable();
}
});

then to be able to use this table in other components or controllers you can do

{{my-jquery-datatable modelWithData=otherArrayWithTheTableAttributes}}

Hope it helps

jstuartmilne
  • 4,398
  • 1
  • 20
  • 30
  • Hey @Sudakatux! Thanks for swift response. I had this already, So the problem with this is that data tables says** no data in the table and the count reads 0 out of 0 entries** – Riliwan Balogun Nov 11 '15 at 02:13
  • Do you have a populated array in your ```otherArrayWithTheTableAttributes```? If you hardcode table data does it work? – jstuartmilne Nov 11 '15 at 11:20
  • if hardocoding works and the array is populated, then I guess your each is not iterating, try not initializing the datatable to check if the table gets populated with the array. – jstuartmilne Nov 11 '15 at 20:53
  • The each was iterating. At first it would load up the data but I tested by using the search that comes with datatables, then all the data disappears. – Riliwan Balogun Nov 11 '15 at 21:03
  • ok you dont need this ```{{#course-datatable courses=model}}{{/course-datatable}}``` since you got rid of ```yield``` you can do ```{{course-datatable courses=model}}``` i dont understand what you mean with " it would load up the data but I tested by using the search that comes with datatables, then all the data disappears. " you mean in the jqueryDataTable or just the table? – jstuartmilne Nov 11 '15 at 22:12
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/94864/discussion-between-riliwanrabo-and-sudakatux). – Riliwan Balogun Nov 11 '15 at 22:24