Hi Koolreport,

I have a complicated situation where I have to generate a report using Datatable and then when I click any of the row 1. It needs to be highlighted as selected. 2. The row data along with some hidden columns needs to be displayed as another table within the same page.

My code is below:

    DataTables::create([
                           "dataSource" => $this->dataStore("mytable"),
                           "name"       => "mainTable",
                           "columns"    => [
                               "first_name" => [
                                   "label" => "First Name"
                               ],
                               "last_name" => [
                                   "label" => "Last Name"
                               ],
                               "date_of_birth" => [
                                   "label" => "DOB"
                               ],
                           ],
                           "excludedColumns" => [
                            "address"
                                ],
                           "cssClass"   => [
                               'td' => 'center-align'
                           ],
                           "options" => [
                               "select" => TRUE,
                               "paging"     => TRUE,
                               "searching"  => TRUE,
                               "pageLength" => 10,
                               "dom"        => 'Bfrtip',
                               "buttons"    => [
                                   "copy", "csv", "excel", "pdf", "print", "colvis"
                               ],
                               "responsive" => [
                                "details" => "function(){
                                     $.fn.dataTable.Responsive.display.modal({
                                        header: function ( row ) {
                                            var data = row.data();
                                            return 'Details for '+data[0]+' '+data[1];
                                        }
                                    });
                                }()",
                                "renderer" => "function(){
                                    $.fn.dataTable.Responsive.renderer.tableAll();
                                }()"
                                ]
                           ],
                           "plugins" => ["Buttons", "Responsive"],
                       ]);

Yes, the 2nd table would be 1 row table. I would like to have the data which is being displayed in the 1st table row as well as the hidden columns in the 1st table row to be displayed into 2nd table.

Hi, I tried to do what you advised but I get the following error

subReport is not defined

My Code is

    DataTables::create([
                           "dataSource"   => $this->dataStore("mainTableDataStore"),
                           "name"         => "mainTableId",
                           "columns"      => [
                               "id"    => [
                                   "label" => "Child Id"
                               ],
                               "fname" => [
                                   "label" => "First Name"
                               ],
                               "lname" => [
                                   "label" => "Last Name"
                               ],
                               "dob_x" => [
                                   "label" => "DOB"
                               ],
                           ],
                           "cssClass"     => [
                               'td' => 'center-align'
                           ],
                           "options"      => [
                               "select"     => TRUE,
                               "paging"     => TRUE,
                               "searching"  => TRUE,
                               "pageLength" => 10,
                               "dom"        => 'Bfrtip',
                               "buttons"    => [
                                   "copy", "csv", "excel", "pdf", "print", "colvis"
                               ],
                           ],
                           "plugins"      => ["Buttons", "Responsive"],
                           "clientEvents" => array(
                               "click" => "function(row){
                               console.log(row);
                                subReport.update('subTable',{id:id});                     
                            }",
                           ),
                           "attributes"   => array(
                               "class" => "form-control",
                           )
                       ]);

Hi Koolreport,

Any suggestions?

Hi Sebastian, it is for within the same page.

This works, Thanks!