Datatables error after adding row with Editor
Datatables error after adding row with Editor
WIDNR-Tinberg
Posts: 7Questions: 4Answers: 0
You can ignore my previous question if you can answer this one, as this is the issue I'm trying to solve. I'm getting this error after adding a row with Editor to a DOM-sourced table that uses data-order attributes to order data:
DataTables warning: table id=datesTable - Requested unknown parameter '[object Object]' for row 44, column 0. For more information about this error, please see http://datatables.net/tn/4
Here's a sample table:
<table id="datesTable">
<thead>
<tr>
<th colspan="5">Active Time Periods</th>
<th colspan="1">
<button type="button" id="addDatesButton">Add</button>
</th>
</tr>
<tr>
<th>Start Date</th>
<th>End Date</th>
<th>Last Updated</th>
<th>By</th>
<th>Created</th>
<th>By</th>
</tr>
</thead>
<tbody>
<tr id="31845069">
<td data-order="1968-05-01T00:00:00" class="dws-table-edit-field">05/01/1968</td>
<td data-order="1968-10-31T00:00:00" class="dws-table-edit-field">10/31/1968</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
<tr id="31845070">
<td data-order="1969-05-01T00:00:00" class="dws-table-edit-field">05/01/1969</td>
<td data-order="1969-10-31T00:00:00" class="dws-table-edit-field">10/31/1969</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
<tr id="31845071">
<td data-order="1970-05-01T00:00:00" class="dws-table-edit-field">05/01/1970</td>
<td data-order="1970-10-31T00:00:00" class="dws-table-edit-field">10/31/1970</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
<tr id="31845072">
<td data-order="1971-05-01T00:00:00" class="dws-table-edit-field">05/01/1971</td>
<td data-order="1971-10-31T00:00:00" class="dws-table-edit-field">10/31/1971</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
<tr id="31845073">
<td data-order="1972-05-01T00:00:00" class="dws-table-edit-field">05/01/1972</td>
<td data-order="1972-10-31T00:00:00" class="dws-table-edit-field">10/31/1972</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
<tr id="31845074">
<td data-order="1973-05-01T00:00:00" class="dws-table-edit-field">05/01/1973</td>
<td data-order="1973-10-31T00:00:00" class="dws-table-edit-field">10/31/1973</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE TRANSFER</td>
<td data-order="1999-11-14T14:49:35">11/14/1999</td>
<td>DATE_TRANSFER</td>
</tr>
</tbody>
</table>
And relevant Javascript:
var datesTable;
function updateRowDateCellsAttr(rowId) {
var dtCell = datesTable.cell('#' + rowId, 0); // get first cell of row
$(dtCell.node()).attr('data-order', '2020-01-01T00:00:00'); // hardcoded data-order value
}
$(function () {
var datesEditor = new $.fn.dataTable.Editor({
ajax: {
url: '/api/rodates'
},
table: '#datesTable',
fields: [
{ label: 'Start Date', name: 'StartDate', type: 'datetime', format: 'MM/DD/YYYY' },
{ label: 'End Date', name: 'EndDate', type: 'datetime', format: 'MM/DD/YYYY' }
],
formOptions: {
main: {
buttons: [
{
text: 'Cancel',
className: 'btn-primary mr-2',
action: function () {
this.close();
}
},
{
text: 'Save',
className: 'btn-primary',
action: function () {
this.submit();
}
}
],
title: 'Edit Dates',
submit: 'allIfChanged'
}
}
});
datesEditor.on('create', function (e, json, data, id) {
updateRowDateCellsAttr(id);
});
$('#datesTable').on('click', '.dws-table-edit-field', function (e) {
datesEditor.edit($(this).closest('tr'));
});
$('#addDatesButton').click(function () {
datesEditor.create();
});
datesTable = $('#datesTable').DataTable({
dom: 't',
order: [[0, 'desc']],
columns: [
{
data: {
_: 'StartDate',
type: '@data-order',
sort: '@data-order'
}
},
{
data: {
_: 'EndDate',
type: '@data-order',
sort: '@data-order'
}
},
{
data: {
_: 'LastUpdateDate',
type: '@data-order',
sort: '@data-order'
}
},
{ data: "LastUpdateUserId" },
{
data: {
_: 'CreationDate',
type: '@data-order',
sort: '@data-order'
}
},
{ data: "CreationUserId" }
]
});
});
And the JSON response containing the data to add to the row:
{"data":[{"DT_RowId":"32016819","StartDate":"05/01/2019","EndDate":"10/31/2019","LastUpdateDate":"10/17/2019","CreationDate":"10/17/2019","LastUpdateUserId":"tinbebxnni","CreationUserId":"tinbebxnni"}],"error":null,"fieldErrors":[]}
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
For reference, as it includes relevant information the previous discussion is here.
What you are looking for also relates to what we discussed here.
If you want to use the data-order attributes, then you'd need to have the server-side send JSON back in the format we discussed in that second thread - e.g.
It is possible to do that using a getFormatter but I'd actually suggest against that. I think this approach is a lot more complicated that simply using your formatted data, removing the
data-orderattribute and instead this date / time sorting plug-in for DataTables.An alternative would be to use a method such as in this example whereby the date is formatted only when needed for display.
Allan
The 15 lines of date/time sorting plug-in code did the trick. That ends up being much simpler code, both client-side and backend. Thanks for all your help!
That plug-in is going to be built into the next major version of DataTables - its so useful!
Allan