Show child row in a modal with AJAX data

Loren Maxwell

Is there an example of opening a modal that uses AJAX to pull additional child row data?

I've tried two approaches:

1) The Responsive extension with the modal display (https://datatables.net/extensions/responsive/examples/display-types/modal), but
-- I can't figure out how to get the AJAX request to work and
-- It appears to try to load the data for every single row instead of waiting for me to click the child row button

2) The standard child row example (https://datatables.net/examples/api/row_details.html) combined with the $.fn.dataTable.Responsive constructor. Below is my starting point, but I get a TypeError: $.fn.dataTable is undefined error.

    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
            new $.fn.dataTable.Responsive( table, {
                details: false
            } );

    } );

I'm using Responsive 2.2.0 in both cases.

allan

Does the table contain the data that you need to display already? If so, then stick with Responsive and use a modal example like you are.

If it doesn't and you need to make an Ajax request, as appears to be the case, don't use Responsive's own modal display - since that will only shown the content hidden in the table. You can use Responsive to hide columns still, but you'll need to make that Ajax request to get the data externally and then use a modal library (or your own) to display the model with the information required.

Allan

Loren Maxwell

Thanks, Allan.

You're correct, the data is not already part of the table but I'd like to retrieve it when the user clicks the "details" icon that would normally open a child row.

So, I can tell I'm already outside the scope of Datatables proper, and this seems like probably a Javascript question (which I have limited experience with), but do you have a basic example of how to do this?

allan

I'm sorry, that's beyond the scope of the free support I can provide, however, you might find this blog post interesting. Its Ajax loading the child row data, but it uses child rows rather than modals. You would just use the same technique but with a modal display.

Allan

Loren Maxwell

Thanks, Allan.

I think I understand enough to figure it out.