Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82286

Datatables error after adding row with Editor

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

Viewing all articles
Browse latest Browse all 82286

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>