DataTable plugin using aurelia updating data

Question

I'm using the DataTables and DatePicker plugins with Aurelia. I basically want the user to select a date and have the data table render the data for that date but with my current code there seems to be an issue with the datatable once the data changes. As soon as the data changes the formatting on the datatable plugin seems off and the sorting, scrolling buttons don't work. I tried adding the datepicker on a jsfiddle but I had no luck as you have to add some configuration to package.json and I can't seem to figure that out. If anyone could give any hints I would really appreciate it. Let me know if you have any questions

  pickerChanged() { this.picker.events.onChange = (e) => { this.data = []; let inputDate = new Date(e.date.format('YYYY-MM-DD') + ' 00:00'); let data = (demoData as any).default; for (let row of data) { let rowDate = new Date((row as any).date); if (inputDate.getTime() >= rowDate.getTime()) { this.data.push(row); } } console.log(4444, this.data); $(document).ready(function() { $('#dataTable').DataTable( { "scrollY": "280px", "scrollCollapse": true, "paging":false, "searching": false, "info": false, "language": { "emptyTable": " " } } ); } ); }; } 

 <abp-datetime-picker element.bind="picker"></abp-datetime-picker> <div class="row pt-2"> <div class="col-12"> <table class="table" id="dataTable"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Receipt #</th> <th>Invoice number</th> <th>Date</th> <th>Total</th> <th>Balance</th> <th>Payment</th> </tr> </thead> <tbody> <tr repeat.for="row of data"> <td>${row.id}</td> <td>${row.name}</td> <td>${row.receiptNumber}</td> <td>${row.invoiceNumber}</td> <td>${row.date}</td> <td>${row.total}</td> <td>${row.balance}</td> <td>${row.payment}</td> </tr> </tbody> </table> <div class="text-center" if.bind="!data.length">No records available. Please select a valid date</div> </div> </div> 

Answer 1

After a few hours of investigating the issue I finally figured it out. The problem with my old code was that I was passing data to the datatable using ${row.id} for example instead of using the data parameter with datatable like follows.

 $('#dataTable').DataTable({ data: this.data, columns: [ { data: 'id' }, { data: 'name' }, { data: 'receiptNumber' }, { data: 'invoiceNumber' }, { data: 'date' }, { data: 'total' }, { data: 'balance' }, { data: 'payment' }, ] }); 

 <div class="row pt-2"> <div class="col-12"> <table class="table" id="dataTable"> <thead> <tr> <th>Id</th> <th>Name</th> <th>Receipt #</th> <th>Invoice number</th> <th>Date</th> <th>Total</th> <th>Balance</th> <th>Payment</th> </tr> </thead> </table> </div> </div> 

and then calling this function whenever you want to update your data

 $('#dataTable').DataTable().clear().rows.add(this.data).draw();