How to get column to show as child row?

How to get column to show as child row?

PhilJonesPhilJones Posts: 10Questions: 2Answers: 0
    <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.

Answers

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    Bump.

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    Bump.

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    Bump.

  • johnvndnbrkjohnvndnbrk Posts: 8Questions: 1Answers: 1

    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

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin

    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

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    @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.

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0
    edited April 2016

    @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.

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

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

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin

    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

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    @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?!

  • PhilJonesPhilJones Posts: 10Questions: 2Answers: 0

    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.

  • allanallan Posts: 63,353Questions: 1Answers: 10,444 Site admin

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

    Allan

This discussion has been closed.