parent/child with additional data

montoyam

I have a parent/child setup implemented as shown here: https://datatables.net/blog/2019-01-11

However, when the child is shown, I would like to add data in addition to the table. I tried this:

    function createChild(row) {
        var rowData = row.data();
        var rowID = rowData.RequestID;

        // This is the table we'll convert into a DataTable
        var table = $('<table class="display" />');

        // Display it the child row
        //row.child(table).show();
        row.child('<h3>' + rowData.RequestDescription + '</h3>' + table).show();

it shows this in the created tr:

Request Description shows here
[object Object]

I guess it turned table to a string. is there a way I can add the RequestDescription after the table is drawn perhaps?

allan

'<h3>' + rowData.RequestDescription + '</h3>' + table

table is a jQuery object, so you are adding (concatenating) a string to an object. The output you are seeing is what I would expect. Are you trying to put a table inside the child row? If so, append the row(s) / cell(s) to it, like you would with other DOM manipulation, then use row.child(table).show();.

You might also be interested in this blog post which I think largely does what you are looking for - with an Ajax call (which you might or might not want).

Allan

montoyam

but from what I am seeing, table can only be the table, no extra items such as

<

h1> and such, because of table.DataTables() function, right?

    function createChild(row) {
        var rowData = row.data();
        var rowID = rowData.RequestID;

        // This is the table we'll convert into a DataTable
        var table = $('<table class="display"/>');

        // Display it the child row
        row.child(table).show();
        //row.child( rowData.RequestDescription  + table).show();

        // Editor definition for the child table
        var RequestNotesEditor = new $.fn.dataTable.Editor({
            ajax: {
                url: 'api/RequestNotes',
                data: function (d) {
                    d['requestIDFilter'] = rowID;
                }
            },
            table: table,
            fields: [
                { label: "RequestID", name: "RequestID", def: rowID, type: "readonly"},
                {
                    label: "Request Note:",
                    name: "RequestNote",
                    type: "textarea"

                },
                {
                    label: "Added By",
                    name: "AddedBy",
                    def: function () {
                        return userName;
                    }
                    , type: "readonly"
                },
                {
                    label: "Date Added",
                    name: "DateAdded",
                    def: function () {
                        var d = new Date();
                        return d;
                    }
                    , type: 'readonly'
                    //, format: "M/D/YYYY"

                }
            ]
        });

        RequestNotesTable = table.DataTable({
            dom: 'Bfrtip',
            ajax: {
                url: 'api/RequestNotes',
                type: 'post',
                data: function (d) {
                    d['requestIDFilter'] = rowID;
                }
            },
            columns: [
                { data: "RequestNote", title: "Comment" },
                { data: "AddedBy", title: "Added By" },
                { data: "DateAdded", title: "Date Added" }
            ],
            select: { style: 'single' },
            autoWidth: true,
            buttons: {
                buttons: [
                    { extend: 'create', editor: RequestNotesEditor, text: '<span class="fa fa-plus-circle fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Add Fund/Org' },
                    { extend: 'edit', editor: RequestNotesEditor, text: '<span class="fa fa-edit fa-2x icon-purple"></span>', className: 'btn', titleAttr: 'Edit Fund/Org' }
                ],
                dom: {
                    button: { tag: 'i', className: '' }
                }
            }
        });
        RequestNotesEditor.on('submitSuccess', function () {
            RequestsTable.ajax.reload();
        });
    }

kthorngren

Try this:

    var table = $('<h3>' + rowData.RequestDescription + '</h3><table class="display" />');
 
    // Display it the child row
    row.child( table ).show();

Kevin

montoyam

no, when I tried that I got an error:

DataTables warning: Non-table node initialisation (H3). For more information about this error, please see http://datatables.net/tn/2

Like I mentioned above, this must be because I use table variable later to initialize the Datatable (line 51 above): RequestNotesTable = table.DataTable({

I have found a work-around for now where I am adding a caption to the table:

var table = $('<table class="display"><caption>' + rowData.RequestDescription + '</caption></table>');

But there is some other things I would like to add besides the table.

kthorngren

Yep, I see. Just use some jQuery methods to place the elements where you want. You can inspect the HTML to see the structure built by row().child().show(). Something like this might do what you want:

$(table).parent().prepend('<h3>My Table</h3>');

Here it is in an example:
http://live.datatables.net/gohefoki/433/edit

Kevin

montoyam

yes, that worked perfectly!

thanks