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":[]}