how to set row details options if the header is dynamic?

xemacs

I found an example here to set the row details like this:

var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "scripts/ids-objects.php",
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" }
        ],
        "order": [[1, 'asc']]
    } );

but this is for a predefined header. What I have is like this:

$('#dataTables-entries').DataTable({  
                            "scrollX":"50px",
                            "scrollX": true,                                               
                            data: record,
                            columns: header,
                            responsive: true                                      
                            }); 

Now I'm wondering how to make it that it will include a row that has all additional details. I tried to use or setup it like this but didn't worked:

$firstcolumn = array('title' => array(
            "className"     =>      'details-control',
                "orderable" =>      false,
                "data" =>           null,
                "defaultContent" => ''
            )
        );

array_unshift($rowheader, $firstcolumn);

foreach($rowheader as $row){
            // $rows['']
            $a['title'] = $row;
            $headervalue[] = $a;
            $a = array();
 }

colin

Hi @xemacs,

I'm not following this one, sorry. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

xemacs

Hey @colin

I am basically wanted to make a table like this: https://datatables.net/examples/server_side/row_details.html that has the ability to hide/show child rows which are attached to the parent row of the table. But the example is only for static or known header. I am working on dynamic header based on form submissions.

kthorngren

This seems to be a PHP specific question about how to build the header data structure rather than a Datatables question. I'm not familiar with PHP so not sure what the final result will look like. I would use console.log( header ); to see what the variable looks like in Javascript.

Kevin

xemacs

@kthorngren one thing I'm confused of is the use of different key for header. Othe examples used 'title' but other used 'data' as well to set the header fields.

kthorngren

They do different things. columns.title sets the column header title. columns.data is to define the data source for the column.

My guess is your code is creating nested objects and should look more like this:

$firstcolumn = array('title' =>  'column name',
            "className"     =>      'details-control',
                "orderable" =>      false,
                "data" =>           null,
                "defaultContent" => ''

        );

Kevin