child rows not working after datatable destrory()

pjustindaryll

Hi Team,

May I ask for assistance regarding this matter? I am currently using this guide https://datatables.net/examples/api/row_details.html for reference in displaying child rows.

Now, when I destroy the datatable to update new data, it does not open the child row anymore.

I'm using destroy to update the data when I select a data on dropdown, on the 1st load the child row works, but when it is destroyed using dropdown the child rows does not work anymore.

I get this error on FireFox.

And, this on Chrome.

(m_particulars is structured the same as d.extn in the code below.)

/* 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>Full name:</td>' +
        '<td>' +
        d.name +
        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extension number:</td>' +
        '<td>' +
        d.extn +
        '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Extra info:</td>' +
        '<td>And any further details here (images etc)...</td>' +
        '</tr>' +
        '</table>'
    );
}
 
$(document).ready(function () {

InitializeAjaxDatatable();
function InitializeAjaxDatatable() {

    var table = $('#example').DataTable({
        ajax: '../ajax/data/objects.txt',
        columns: [
            {
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { data: 'name' },
            { data: 'position' },
            { data: 'office' },
            { data: 'salary' },
        ],
        order: [[1, 'asc']],
    });
 
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.dt-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row(tr);
 
        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        } else {
            // Open this row
            row.child(format(row.data())).show();
            tr.addClass('shown');
        }
    });
}

$("#button").on('change', function () {
 $('#example').DataTable().destroy(); 
 InitializeAjaxDatatable(); 
});

});

Thank you.

kthorngren

My guess is when you destroy you are adding a new click event listener for the child rows, ie, td.dt-control. Now you have two so the child opens then closes. Try moving the lines 48-62 outside of the function so its executed once.

Kevin

pjustindaryll

Thank you so much! it worked! I was thinking it might be the format(d) that need to be reinitialized, didn't thought of it this way.

KevinQ97

pjustindaryll

Dude, I moved rows 48-62 out of the function and now it no longer displays the child rows.
Could you help me?
please.

kthorngren

@KevinQ97 Its hard to say what the problem might be without seeing the code that you have. At a minimum post your relevant Javascript code. Better is a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

fhuo

the best solution when details arenot shown (generated by ChatGPT) because isShown

var isChildRowOpen = false;

$("#example tbody").on("click", "td.details-control", function () {
  var tr = $(this).closest("tr");
  var row = table.row(tr);

  if (isChildRowOpen) {
    // Close the child row if it is already open
    row.child.hide();
    tr.removeClass("shown");
    isChildRowOpen = false;
  } else {
    // Display the child row and set isChildRowOpen to true
    row.child(format(row.data())).show();
    tr.addClass("shown");
    isChildRowOpen = true;
  }
});

// Close the child row if the user clicks the close button within it
$("#example tbody").on("click", ".close-child-row", function() {
  var tr = $(this).closest("tr");
  var parentTr = tr.prev(".parent-row");
  var parentRow = table.row(parentTr);
  
  parentRow.child.hide();
  parentTr.removeClass("shown");
  isChildRowOpen = false;
});

This works fine

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

What is the .close-child-row element in this context? It isn't mentioned anywhere else in this thread, or is the ChatGPT added code that isn't needed?

Also, don't use isChildRowOpen - instead check with the row().child.isShown() method.

Allan