OPEN row child details in modal ?

oh132

Hello,

I want to know if it's possible to open the row child details in modal ( like searchbuilder on button ) ?

Actually, the data is under the parent row but I need to open in 'floating modal

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

        if ( row.child.isShown() ) {
          row.child.hide();
        }
        else {
          row.child( 
            '<table class="child_table" id="child_history'+index+'" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
                  '<thead><tr><th>action</th><th>action_time</th><th>name</th><th>field</th><th>old_value</th><th>new_value</th></tr></thead><tbody>' +
             '</tbody></table>').show();

          new DataTable('#child_history'+index, {
            ajax: '/api/cms/history/host/'+row.data().name,
            processing: true,
            serverSide: true,
            info: false,
            filter: false,
            columns: [
              { "data": "action" },
              { "data": "action_time" },
              { "data": "name" },
              { "data": "field" },
              { "data": "old_value" },
              { "data": "new_value" },
            ],
            destroy: true,
            scrollY: '400px'
          });
          row.child.show();
        }
      });

Any idea ?`

rf1234

This should help you out. Not sure whether the example in the second link really works though.

https://datatables.net/reference/option/responsive.details.display

https://datatables.net/extensions/responsive/examples/child-rows/custom-renderer.html

This one shows a Bootstrap modal:
https://datatables.net/extensions/responsive/examples/display-types/bootstrap-modal.html

This has all the display options:
https://datatables.net/extensions/responsive/examples/display-types/index.html

kthorngren

The first two statements in your click event get the clicked row. Add a third statement to get the row data using row().data(). Something like this:

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

Using the row data you can populate and display a modal. Something like this example that uses alert().

Kevin