Child row above parent row on datatable

Question

I have been working on the datatable child rows ,I Found the example provided by datatable

https://datatables.net/examples/server_side/row_details.html

The Problem is they have provided the child rows to be generated beneath the parent,But my requirement is to generate the child row above the parent row

Is there any way do this.

I have implemented the child row under the parent row as follows

function format ( d ) {
    return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
        'Salary: '+d.salary+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.';
}

$(document).ready(function() {
    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']]
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

Hope Someone can help.:-)

Answer 1

Try below logic: add tr before clicked tr with class="child". Check if clicked tr has class details and accordingly add or remove child before tr.

var tableData = {
  "draw": 1,
  "recordsTotal": 57,
  "recordsFiltered": 57,
  "data": [
    {
      "DT_RowId": "row_5",
      "first_name": "Airi",
      "last_name": "Satou",
      "position": "Accountant",
      "office": "Tokyo",
      "start_date": "28th Nov 08",
      "salary": "$162,700"
    },
    {
      "DT_RowId": "row_25",
      "first_name": "Angelica",
      "last_name": "Ramos",
      "position": "Chief Executive Officer (CEO)",
      "office": "London",
      "start_date": "9th Oct 09",
      "salary": "$1,200,000"
    },
    {
      "DT_RowId": "row_3",
      "first_name": "Ashton",
      "last_name": "Cox",
      "position": "Junior Technical Author",
      "office": "San Francisco",
      "start_date": "12th Jan 09",
      "salary": "$86,000"
    },
    {
      "DT_RowId": "row_19",
      "first_name": "Bradley",
      "last_name": "Greer",
      "position": "Software Engineer",
      "office": "London",
      "start_date": "13th Oct 12",
      "salary": "$132,000"
    },
    {
      "DT_RowId": "row_28",
      "first_name": "Brenden",
      "last_name": "Wagner",
      "position": "Software Engineer",
      "office": "San Francisco",
      "start_date": "7th Jun 11",
      "salary": "$206,850"
    },
    {
      "DT_RowId": "row_6",
      "first_name": "Brielle",
      "last_name": "Williamson",
      "position": "Integration Specialist",
      "office": "New York",
      "start_date": "2nd Dec 12",
      "salary": "$372,000"
    },
    {
      "DT_RowId": "row_43",
      "first_name": "Bruno",
      "last_name": "Nash",
      "position": "Software Engineer",
      "office": "London",
      "start_date": "3rd May 11",
      "salary": "$163,500"
    },
    {
      "DT_RowId": "row_23",
      "first_name": "Caesar",
      "last_name": "Vance",
      "position": "Pre-Sales Support",
      "office": "New York",
      "start_date": "12th Dec 11",
      "salary": "$106,450"
    },
    {
      "DT_RowId": "row_51",
      "first_name": "Cara",
      "last_name": "Stevens",
      "position": "Sales Assistant",
      "office": "New York",
      "start_date": "6th Dec 11",
      "salary": "$145,600"
    },
    {
      "DT_RowId": "row_4",
      "first_name": "Cedric",
      "last_name": "Kelly",
      "position": "Senior Javascript Developer",
      "office": "Edinburgh",
      "start_date": "29th Mar 12",
      "salary": "$433,060"
    }
  ]
}
function format ( d ) {
    return '<tr class="child"><td colspan="5">Full name: '+d.first_name+' '+d.last_name+'<br>'+
        'Salary: '+d.salary+'<br>'+
        'The child row can contain any data you wish, including links, images, inner tables etc.</td></tr>';
}
 
$(document).ready(function() {
    var dt = $('#example').DataTable( {
        "columns": [
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" }
        ],
        "order": [[1, 'asc']]
    } );
 dt.clear();
 dt.rows.add(tableData.data);
 dt.draw();
    // Array to track the ids of the details displayed rows
    var detailRows = [];
 
    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );
 
        if ( tr.hasClass('details') ) {
            tr.removeClass( 'details' );
            tr.prev('tr.child').remove();
        }
        else {
            tr.addClass( 'details' );
            tr.before(format( row.data())).show();
        }
    } );
 
    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

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

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th></th>
                <th>First name</th>
                <th>Last name</th>
                <th>Position</th>
                <th>Office</th>
            </tr>
        </tfoot>
    </table>