Display content as HTML in Child row

timcadieux

I know there are a multitude of request for displaying cell contents as HTMl and the response always says to just see the render option but I see nothing that means anything to me.

I wish to display a formatted Tweet in a Child Row, see below..this always renders the tweet as a string..

var table = $('#Table').DataTable({
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "order": [[3, "desc"]],
    "info": true,
    "autoWidth": false,
    "responsive": true,
    "columnDefs": [
        {
            "targets": 4,
            "className": 'details-control',
            "orderable": false,
            "data": null,
            "defaultContent": '',
            "render": function () {
                return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
            },
            width: "15px"
        },
        {
            "targets": 5,
            "data": 'content',
            "render": $.fn.dataTable.render.text().display,
            "visible": false
        },
        {
            "targets": 6,
            "data": 'summary',
            "visible": false
        }
    ]
});

/* Formatting function for row details - modify as you need */
function format(d) {

    // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
        '<tr>' +
        '<td>Tweet:</td>' +
        '<td>' + d.content + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extension number:</td>' +
        '<td>' + d.summary + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extra info:</td>' +
        '<td>And any further details here (images etc)...</td>' +
        '</tr>' +
        '</table>';
}

// Add event listener for opening and closing details
$('#Table tbody').on('click', 'tr td.details-control', function () {
    var tr = $(this).closest('tr');
    var tdi = tr.find("i.fa");
    var row = table.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
        tdi.first().removeClass('fa-minus-square');
        tdi.first().addClass('fa-plus-square');
    }
    else {
        // Open this row
        row.child(format(row.data())).show();
        tr.addClass('shown');
        tdi.first().removeClass('fa-plus-square');
        tdi.first().addClass('fa-minus-square');
    }
});

kthorngren

With the Child Detail rows you use the format() function to display the child data. You can return any properly formatted HTML string to show the data you want. It doesn't have to be a table. Datatables doesn't have any requirements of what you display. You will need to find a tutorial or inspect a tweet to learn how to create output that looks like a tweet.

Kevin

timcadieux

The Tweet is already Formatted, but the string that is passed via the d.contact is encapsulated inside quotes..and encoded ie
<

timcadieux

I got it working this way

'<td>' + $("<span/>").html(d.content).text()+ '</td>' +

timcadieux

There's no option on this page to allow me to close this question

xfirebg

@timcadieux thanks for sharing how you fix it. I searched for some time to discover this.

btw I dont see any logic in the code