"Read HTML to data objects" for dynamically added html/rows

sunbathingseal

Hi,

Converting html to objects in datatables works fine according to the docs here Read HTML to data objects. This also preserves <tr> and <td> classes already set in the html.

My issue is that the above feature only seems to work at datatable initialization. My html source is not ready when the datatable is initialized. I would like to add it some time after the datatable has been initialized.
I have tried adding a <tr> tag using DataTable().row.add():

let table = $('#example').DataTable({
    'columns': [
            {
                'data': "Name",
            },
            {
                'data': 'Position'
            }
    ]
});

table.row.add('<tr><td class="test">Airi Satou</td><td>Accountant</td></tr>').draw();

This does not work like it does for html sourcing in the link above however, and results in the error "Requested unknown parameter 'Name' for row 1".

Using the following code adds the row successfully, however it ignores the class set on the <td> tag (also of course it means I cannot set any <tr> attributes either, but for now I would like to set <td> attributes):

table.row.add({'Name': '<td class="test">Airi Satou</td>', 'Position': '<td>Accountant</td>'}).draw();

Is there any way of utilizing the html-to-object feature that seems to only work at datatable initialization for dynamically added rows? I don't want to only add the value for the cells in row.add(), but also <tr> and <td> formatting.

kthorngren

You will need to make it a jQuery object, like this:
http://live.datatables.net/coziyugi/1/edit

It might not work with the columns.data definition you have. You may need to remove it.

Kevin

sunbathingseal

Thanks for the reply. table.row(s).add with jquery objects does work, even with columns.data, thanks. It also works when passing HTML elements (not strings). Looking at the datatable source code, this is done with the use of the function _fnAddTr. With that working, I tried to achieve the same using the ajax option of datatables. I found out that this feature is not implemented there though. I had to modify _fnInitialise in jquery.dataTables.js to make it work (before there was only the call to _fnAddData(...):

function _fnInitialise(settings) {

    ...

    // Got the data - add it to the table
    for (i = 0; i < aData.length; i++) {
        if (aData[i].nodeName && aData[i].nodeName.toUpperCase() === 'TR') {
            _fnAddTr(settings, aData[i]);
        }
        else {
            _fnAddData(settings, aData[i]);
        }
    }

    ...
}

allan

You are correct - we don't attempt to parse nodes from a JSON data source, since you can't have a node there.

An alternative would be to do the Ajax call yourself, convert the strings to nodes and then use row.add() / rows.add().

Allan

sunbathingseal

Yes that would be an alternative. However then I would need to mess with custom loading texts/symbols while waiting for the data to load, instead of using the builtin features, right? And any other logic in initComplete.
Anyhow, we do have good workarounds now for the issue, thanks for all the help!

allan

You are correct, although it would only be about 3 extra lines of code with jQuery.ajax / jQuery.getJSON.

Allan