Mixing
DataTable plugin using aurelia updating data
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>javascript jquery html datatables aurelia
asked Nov 20 '18 at 16:09
sbattousbattou
7311
add a comment |
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>javascript jquery html datatables aurelia
asked Nov 20 '18 at 16:09
sbattousbattou
7311
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12
add a comment |
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>javascript jquery html datatables aurelia
asked Nov 20 '18 at 16:09
sbattousbattou
7311
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> 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> 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>javascript jquery html datatables aurelia
javascript jquery html datatables aurelia
asked Nov 20 '18 at 16:09
sbattousbattou
7311
asked Nov 20 '18 at 16:09
sbattousbattou
7311
asked Nov 20 '18 at 16:09
sbattousbattou
7311
asked Nov 20 '18 at 16:09
sbattousbattou
7311
asked Nov 20 '18 at 16:09
sbattousbattou
7311
7311
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12
add a comment |
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12
add a comment |
1 Answer
1
active
oldest
votes
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();answered Nov 21 '18 at 18:30
sbattousbattou
7311
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397057%2fdatatable-plugin-using-aurelia-updating-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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();answered Nov 21 '18 at 18:30
sbattousbattou
7311
add a comment |
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();answered Nov 21 '18 at 18:30
sbattousbattou
7311
add a comment |
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();answered Nov 21 '18 at 18:30
sbattousbattou
7311
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();$('#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>$('#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>$('#dataTable').DataTable().clear().rows.add(this.data).draw();$('#dataTable').DataTable().clear().rows.add(this.data).draw();answered Nov 21 '18 at 18:30
sbattousbattou
7311
answered Nov 21 '18 at 18:30
sbattousbattou
7311
answered Nov 21 '18 at 18:30
sbattousbattou
7311
answered Nov 21 '18 at 18:30
sbattousbattou
7311
7311
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53397057%2fdatatable-plugin-using-aurelia-updating-data%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I also tried putting my code on GistRun (gist.github.com/jdanyow/1ae985e6c943885496e8) but couldn't get the datepicker to work
– sbattou
Nov 20 '18 at 16:12