Child row hide show not displaying

sharmster

Hi I am new to datatables and I am trying to follow this example http://datatables.net/extensions/responsive/examples/child-rows/whole-row-control.html

I have tried following example http://www.datatables.net/examples/api/row_details.html, the child row show/hide example as well but I am not using any AJAX to pull through the data. In my example I want to hard code the data in.

I don't seem to be able to get the row with the hide show image to display and the hidden td is displayed on the same row as all other td's in the table.

Again I am new to this so have most likely made a fundamental mistake(s) some where

Thanks

Here is the HTML

<table id="example" class="display nowrap" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th></th>
                <th>Item 1</th>
                <th>Item 2</th>
                <th>Item 3</th>
                <th>Item 4</th>>
                <th>Item 5</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td></td>
                <td>data 1</td>
                <td>data 1</td>
                <td>data 1</td>
                <td>data 1</td>
                <td>data 1 hidden</td>
            </tr>
            <tr>
                <td></td>
                <td>data 2</td>
                <td>data 2</td>
                <td>data 2</td>
                <td>data 2</td>
                <td>data 2 hidden</td>
            </tr>
</tbody>
</table>

The Javascript

<script type="text/javascript">
  
$(document).ready(function() {
    $('#example').DataTable( {
        responsive: {
            details: {
                type: 'column',
                target: 'tr'
            }
        },
        columnDefs: [ {
            className: 'control',
            orderable: false,
            targets:   0
        } ],
        order: [ 1, 'asc' ]
    } );
} );

</script>

<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.2/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/responsive/1.0.1/css/dataTables.responsive.css">
<link rel="stylesheet" type="text/css" href="http://www.datatables.net/release-datatables/extensions/TableTools/css/dataTables.tableTools.css">

<style>

td.control {
    background: url('http://next.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.control {
    background: url('http://next.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

td.data {font-size:9px}

</style>

mRender

You need this function to display the new rows.

/* 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>';
}

The example for this function can be found here: http://www.datatables.net/examples/api/row_details.html

sharmster

Thank you for the quick reply. This function is not in the first example link above

mRender

It's located under the Javascript tab that you need with the datatables javascript.

allan

Slightly crossed wires here I think. @sharmster is referring to the child rows in Responsive, rather than the custom child rows from the API example.

@sharmster - can you please link to the page that you have created and isn't working properly so we can take a look and see what is going wrong.

Allan

sharmster

Hi Allan yes I shouldn't of put the second link in as it has lead to confusion.

I have been using JSFiddle to try and get this working, here is the example I have been using

http://jsfiddle.net/sharmster/294va2hs/

I am assuming the CSS links have the icons used in the example and the hide show code within it.

Thanks

allan

Thanks for the link. It appears to work as expected based on the code given in the table. What is the problem with it?

Allan

sharmster

Hi in the Whole row child row control example there are hide show icons that when clicked show the final td row in the table. I have copied over all the code and files from the example but I dont get the hide show row option.

Or have I miss understood what the example is doing?

allan

Resize the viewport so the final column is removed from the display. Then there will be a click to show button.

Allan

sharmster

Thank you Allan , I did miss understand what it was doing. I do need to look at the row details example http://www.datatables.net/examples/api/row_details.html and try and get it working with hard coded table data

allan

You can't mix the responsive and child row example since Responsive uses the child rows (technically you can, but it isn't trivial).

Allan

sharmster

Is it possible to use the child row example with out using AJAX?

allan

Yes. The API methods for row().child() will work regardless of the data source.

Allan

sharmster

Thanks will give it ago