Display content as HTML in Child row

Display content as HTML in Child row

timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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');
    }
});

Answers

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736

    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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0
    edited January 2021

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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

    I got it working this way

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

  • timcadieuxtimcadieux Posts: 76Questions: 22Answers: 0

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

  • xfirebgxfirebg Posts: 13Questions: 3Answers: 0

    @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 :D

Sign In or Register to comment.