Sorting rows of a nested table within a DataTables Child-row

dccevolution

I am utilizing the child-row ability (https://datatables.net/examples/api/row_details.html of DataTables and have a successful bit of JS code that uses nested arrays within a json to populate.

For the fiddle I am just using random generated numbers rather than live data.

I am brand new to Javascript and wondering if Datatables or JQuery may have a built in sorting function for what is essentially a nested table?

If not - where do I start adding the code? On Show or as part of the function? I am looking sort by the order of the random number column and they do not need to be manually sortable.

Can anyone help?

My Fiddle:
live.datatables.net/benilapu/1/edit

kthorngren

The easiest way is to add the child row data you want to sort into hidden columns using columns.visible. Then you can use order() to sort by the hidden column or columns.

Kevin

dccevolution

Hi @kthorngren - thanks for your answer. Why hidden columns? As per the table example, I want to sort by numbers that are visible.

dccevolution

does this help?

function format ( d ) {
  //this nested table needs to be sorted
    return '<table id ="test" style="width:100%;">'+
        '<tr id=2>'+
            '<td></td>'+
            '<td>Random</td>'+
            '<td>Number 2</td>'+
            '<td>'+Math.random()+'</td>'+
        '</tr>'+
        '<tr id=1>'+
            '<td></td>'+
            '<td>Random</td>'+
            '<td>Number 1</td>'+
            '<td>'+Math.random()+'</td>'+
        '</tr>'+
        '<tr id=3>'+
            '<td></td>'+
            '<td>Random</td>'+
            '<td>Number 3</td>'+
            '<td>'+Math.random()+'</td>'+
        '</tr>'+
    '</table>';
  
  }


$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "/ajax/objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "order": [[1, 'asc']]
    } );
    
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
      var team = $(this).closest('table').attr('id');
      var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {

            row.child( format(row.data()) ).show();
          
            tr.addClass('shown');
        }
    } );
} );

dccevolution

I have been trying for hours to understand how I can do this.... if anyone can save me from throwing my laptop out of the window, I'd be eternally grateful!

Trying to sort the Child rows as per the comments on the fiddle:

live.datatables.net/sevikiki/1/edit

kthorngren

I think I misunderstood the question. I thought you wanted to sort the Datatable rows by the values in the child. It sounds like you want to sort the child rows themselves. Are you wanting to control the sorting by using the sorting icons in the value column header?

Dataables doesn't do anything with the child rows except show and hide them. The layout, order, etc is up to you. How you do this depends on what your data structure is. Here is an example using an array of arrays and the Javascript sort() method with a function.
http://live.datatables.net/sevikiki/2/edit

If interested you can use order() to get the table ordering to determine which way to sort the child rows.

Kevin

dccevolution

I think this is exactly what I am looking for @kthorngren ! Thank you so much!