How to get column to show as child row?

PhilJones

    <table class="table table-bordered" id="table">
      <thead>
        <tr>
          <th>Order No</th>
          <th>Purchase Order No</th>
          <th>Creation Date</th>
          <th>Delivery Date</th>
          <th>Total Items</th>
        </tr>
      </thead>
      <tbody>
      </tbody>
    </table>

    $(document).ready(function() {
        $('#table').dataTable( {
            "ajax": {
                    "url": "/server_scripts/orders.php",
                    "type": "POST"
                    },
            "columnDefs": [
                {
                    "targets": [ 0 ],
                    "render": function ( data, type, full ) {
                        return '<a href="/order.php?id='+ full[0] +'" target="_blank"">' + data + '</a>';
                    }
                }
            ],
            "order": [[ 0, "desc" ]],
            "serverSide": true
        } );
    } );

What is the simplest method to get the Total Items column as a child row instead?

I read the example at https://datatables.net/examples/api/row_details.html but I can't get the table to load at all using similar code.

I don't define columns in the DataTables code, only in the HTML.

PhilJones

Bump.

PhilJones

Bump.

PhilJones

Bump.

johnvndnbrk

Well, if you are looking for the easiest way to do this you can use the Responsive extension and "push" the row off the grid, causing that row to be a child record. An example of this is: https://datatables.net/extensions/responsive/examples/column-control/auto.html. It is not really a child row, however, but it displays like one. You can see this in action when using Responsive and narrowing the browser window width.

This is the easiest way I can think to do this and hopefully relevant to what you are looking for.

Good luck,

John

allan

Hi Phil,

Perhaps you can show us the code you tried for the child row please. If should basically be the same as the example you linked to. Have the data you want to display in a column that you make hidden (with columns.visible) and then use that information (which you get from row().data()) when you render the child row.

Allan

PhilJones

@allan Sorry, tried following https://datatables.net/examples/api/row_details.html but got confused, as that code defines columns and such and mine doesn't, so I couldn't match up how I use it in my scenario. I'll try again today and post here.

PhilJones

@allan OK, here is the code:

At the moment I get no child row or anything.

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

          <table class="table table-bordered" id="table">
            <thead>
              <tr>
                <th>Col1</th>
                <th>Col2</th>
                <th>Col3</th>
                <th>Col4</th>
                <th>Col5</th>
                <th>Col6</th>
                <th>Col7</th>
                <th>Col8</th>
                <th>Col9</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

    <script type="text/javascript" charset="utf-8">
    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>Col9:</td>'+
               '<td>'+d.[8]+'</td>'+
               '</tr>'+
               '</table>';
        }

    $(document).ready(function() {
        $('#table').dataTable( {
            "ajax": {
              "data": {
                  "id": "<?php echo $_GET['id']; ?>"
              },
              "url": "/server_scripts/order.php",
              "type": "POST"
              },
            "columnDefs": [
                { "visible": false, "targets": 8 }
            ],
            "order": [[ 0, "desc" ]],
            "info": false,
            "ordering": false,
            "paging": false,
            "serverSide": true,
            "searching": false
        } );
    } );
    
    // Add event listener for opening and closing details
    $('#table tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
    </script>

I don't have names like in the child row example, the server side data is returned just values, example:

{"draw":1,"data":[["1","4","LE04DBRD","6.8mm","18","4mm","377","700","18mmr"],["2","1","LE08LSAF","4mm","16","6.8mm","447","1825","18"]],"recordsFiltered":2,"recordsTotal":2}

Note: I should have said, I want all child rows to be constantly viewable, hence I don't have a column for the icon to open and close.

PhilJones

@allan do you know what I'm doing wrong?

allan

This: d.[8] looks like it would cause a Javascript syntax error. Are there no errors shown in your browser's console? I think it should simply be d[8] for your above data structure.

Allan

PhilJones

@allan Sorry not getting anywhere here using the child row example page. Whenever I try use that code it just completely breaks everything and I can't work out what it is.

Here is current code:

          <table class="table table-bordered" id="table">
            <thead>
              <tr>
                <th>Column1</th>
                <th>Column2</th>
                <th>Column3</th>
                <th>Column4</th>
                <th>Column5</th>
                <th>Column6</th>
                <th>Column7</th>
                <th>Column8</th>
                <th>Column9</th>
              </tr>
            </thead>
            <tbody>
            </tbody>
          </table>

    $(document).ready(function() {
        $('#table').dataTable({
            "ajax": {
                "data": {
                    "id": "<?php echo $_GET['id']; ?>"
                },
                "url": "/server_scripts/order.php",
                "type": "POST"
            },
            "columnDefs": [{
                "visible": false,
                "targets": 8
            }],
            "order": [
                [0, "desc"]
            ],
            "info": false,
            "ordering": false,
            "paging": false,
            "serverSide": true,
            "searching": false
        });
    });

I want Column9 to be the child row, as you can see I've successfully hide that column from appearing but I don't know how to get it to show as an extra row?!

PhilJones

Even when I try and run this

table.rows().every( function () {
    this
        .child(
            $(
                '<tr>'+
                    '<td>'+rowIdx+'.1</td>'+
                    '<td>'+rowIdx+'.2</td>'+
                    '<td>'+rowIdx+'.3</td>'+
                    '<td>'+rowIdx+'.4</td>'+
                '</tr>'
            )
        )
        .show();
} );

as a test, I don't get any child rows or any errors.

allan

Can you give a link to the page show I can debug it please.

Allan