parent/child with additional data

parent/child with additional data

montoyammontoyam Posts: 568Questions: 136Answers: 5

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?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,452Questions: 1Answers: 10,055 Site admin

    '<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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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();
            });
        }
    
  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736

    Try this:

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

    Kevin

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    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.

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • montoyammontoyam Posts: 568Questions: 136Answers: 5

    yes, that worked perfectly!

    thanks

This discussion has been closed.