Datatables not working - yes, again, another Newbie!

Cronin

        import { Client, MimsFinancialGuarantee, MimsFinancialGuaranteeList } from "./client-api";
        import {inject} from "aurelia-framework";
        import {EventAggregator} from "aurelia-event-aggregator"
        import DataTable from "datatables.net";

        @inject (Client, EventAggregator, DataTable)
        export class FinancialGuarantee{
            mimsFinancialGuaranteeList:MimsFinancialGuaranteeList[];
            selectedFG="";

            constructor (private client:Client, private ea: EventAggregator ){
            };

            created(){
                this.client.mimsFinancialGuaranteeListAll().then( mimsFinancialGuaranteeList => this.mimsFinancialGuaranteeList = mimsFinancialGuaranteeList);
                new DataTable('#FGTable', {
                    data: this.mimsFinancialGuaranteeList,
                    columns:[
                        { data: 'controlNo'},
                        { data: 'requestedBy' },
                        { data: 'fgDmcName' },
                        { data: 'LmbName' },
                        { data: 'roadList' },
                        { data: 'projectTypeDescr' },
                    ]}
                );
            }
            select(MimsFinancialGuarantee){
                this.selectedFG = MimsFinancialGuarantee.controlNo; 
                return true;
            }
        }

    AURELIA HTML TEMPLATE:
   <template>
        <div>
        <div class="contact">
            <table class="table table-striped" id="FGTable" >
                <thead>
                    <tr>
                        <th>Control No</th>
                        <th>RequestedBy</th>
                        <th>DMC Name</th>
                        <th>LMB Name</th>
                        <th>Roads List</th>
                        <th>Project Type Descr</th>
                    </tr>
                    <tbody>
                        <tr repeat.for = "mimsFinancialGuarantee of mimsFinancialGuaranteeList"
                        class="list-group-item list-group-item-action ${mimsFinancialGuarantee.id === parent.selectedId? 'active': ''}"
                        >
                            <td>${mimsFinancialGuarantee.controlNo} </td>
                            <td>${mimsFinancialGuarantee.requestedBy}</td>
                            <td>${mimsFinancialGuarantee.fgDmcName}</td>
                            <td>${mimsFinancialGuarantee.LmbName}</td>
                            <td>${mimsFinancialGuarantee.roadList}</td>
                            <td>${mimsFinancialGuarantee.projectTypeDescr}</td>
                        </tr>
                    </tbody>
                </thead>
            </table>
        </div>
    </div>
    </template> 

Debugger code (debug.datatables.net): ???? How do I use this?
Error messages shown: None!
Description of problem:
I am a newbie trying to use the datatables in Aurelia ( also new to me ). The table body part of the html in the Aurelia template works perfectly fine. Data gets fetched and display as expected. I know this is not used in the Datatables function.
However, the Datatable just does absolutely nothing! It worked earlier in the day - and I must have changed something simple - and now there's just nothing - no error messages in Chrome console, no warnings, nada, zippo!
Please help. Thanks.

kthorngren

                 <tbody>
                     <tr repeat.for = "mimsFinancialGuarantee of mimsFinancialGuaranteeList"
                     class="list-group-item list-group-item-action ${mimsFinancialGuarantee.id === parent.selectedId? 'active': ''}"
                     >
                         <td>${mimsFinancialGuarantee.controlNo} </td>
                         <td>${mimsFinancialGuarantee.requestedBy}</td>
                         <td>${mimsFinancialGuarantee.fgDmcName}</td>
                         <td>${mimsFinancialGuarantee.LmbName}</td>
                         <td>${mimsFinancialGuarantee.roadList}</td>
                         <td>${mimsFinancialGuarantee.projectTypeDescr}</td>
                     </tr>
                 </tbody>

Looks like you are loading the table data with the above code.

It also looks like you are trying to load the table data using data:

             new DataTable('#FGTable', {
                 data: this.mimsFinancialGuaranteeList,
                 columns:[
                     { data: 'controlNo'},
                     { data: 'requestedBy' },
                     { data: 'fgDmcName' },
                     { data: 'LmbName' },
                     { data: 'roadList' },
                     { data: 'projectTypeDescr' },
                 ]}
             );

You should chose which method to use.

I'm not familiar with your environment so not sure how the Datatables initialization code is called. Maybe set a breakpoint on line 16 of the code snippet to see if the Datatables init code is called.

Debugger code (debug.datatables.net): ???? How do I use this?

Use the instructions on this page to run the debugger.

Kevin

Cronin

Thanks for the quick reply. I'll follow the suggestion about stepping thru and checking on initialization.
Just on the loading of table data - that was just to check that data was actually coming thru as expected. But even then, the datatable didn't do anything.
It's the use of the data-option that I'm after. Unfortunately I have to leave off this for a while because of some more urgent stuff. Will come back to this later.

Cronin

OK, I just did a last ditch look and it became obvious that the data was fetched a while after the datatable was called.
So I simply made the datatable call as a follow-up on the api call as shown and it worked. Thanks for the help. Much appreciated.

    created(){
            this.client.mimsFinancialGuaranteeListAll().then( mimsFinancialGuaranteeList => this.mimsFinancialGuaranteeList = mimsFinancialGuaranteeList)
            .then (f=> 
            new DataTable('#FGTable', {
                data: this.mimsFinancialGuaranteeList,
                columns:[
                    { data: 'controlNo'},
                    { data: 'requestedBy' },
                    { data: 'fgDmcName' },
                    { data: 'lmbName' },
                    { data: 'roadList' },
                    { data: 'projectTypeDescr' }
                ]}));
        }