/*

 * Based on the code here:

 * https://datatables.net/blog/2019-01-11

*/

​

​

// Provide backgrounds for each child level

var colors = ['#90b2e8', '#7ac470', '#fcba03', '#ad03fc'];

​

function capitalizeFirstLetter(string) {

    return string.charAt(0).toUpperCase() + string.slice(1);

}

​

​

​

/*

 * Create Child DataTable.

 * Args: 

 *   rowData: Object or array of row data

 *   level: Child level - integer

*/

function createChild(row, level, parentData) {

​

    var numLevels = 4;  // Number of child levels with .details-control

    // This is the table we'll convert into a DataTable

    var table = $('<table class="display child-dt" width="100%"/>');

​

    // Display it the child row

    row.child(table).show();

    // Get background color

    var color = colors[level - 1];

    // And set if found

    if (color) {

      table.parent().css('background', color);

    }

    key = 'name';  // Default key

    // Pick the key to filter the `/ajax/objects.txt` data

    switch ( level ) {

      case 1:

        key = "salary";

        break;

      case 2:

        key = "start_date";

        break;

      case 3:

        key = "office";

      }  

    $.ajax({

      url: "/ajax/objects.txt",

      //data: id // Normally would pass an ID parameter to find the data

      success: function (data) {

        data = JSON.parse(data).data;

        // Filters the data based on ID, simulating the use of the ajax.data parameter

        var rowData = [];

​

        for (i=0; i<data.length; i++) {

          if (parentData[key] === data[i][key]) {

            rowData.push( 

              {

                name: data[i].name,

                [key]: data[i][key]

              }

            );

          }

        }

​

        // Make sure we have an array of data for the `data` option.

        if ( ! Array.isArray( rowData ) ) {

          rowData = [rowData];

        }

        var detailsControl = {

                className: "details-control",

                orderable: false,

                data: null,

                defaultContent: "",

                width: "10%"

            };

        // Build columns

        var columns = [];

        var columnNames = Object.keys(rowData[0]);

        for (var i in columnNames) {

          columns.push({data: columnNames[i], 

          title: capitalizeFirstLetter(columnNames[i])});

        }

        // Prepend child details if permitted

        if ( level <= numLevels) {

          columns.unshift(detailsControl);

        }

        // Child row DataTable configuration, always passes the parent row's id to server

        var usersTable = table

          .on('draw.dt', function (e, settings) {

            //console.log('child > DataTable > draw.dt [' + new Date() + "]");

            //console.log('Table ID: ', settings.nTable.id);

            e.stopPropagation();  // Don't bubble draw event to parent

          })

          .DataTable({

            pageLength: 5,

            data: rowData,

            columns: columns,

            select: true,

        });

        // Add event listener for opening and closing details

        table.on("click", "td.details-control", function(e) {

            e.stopPropagation();  // Don't bubble up to parent event

            var tr = $(this).closest("tr");

            var row = usersTable.row(tr);

​

            if (row.child.isShown()) {

                // This row is already open - close it

                destroyChild(row);

                tr.removeClass("shown");

            } else {

                // Open this row

                createChild(row, level + 1, parentData);

                tr.addClass("shown");

            }

        });

      }

    });

}

​

​

function destroyChild(row) {

    // Remove and destroy the DataTable in the child row

    var table = $("table", row.child());

    table.detach();

    table.DataTable().destroy();

​

    // And then hide the row

    row.child.hide();

}

​

$(document).ready(function() {

​

    var siteTable = $("#sites").DataTable({

        ajax: "/ajax/objects.txt",

        order: [1, "asc"],

        columns: [

            {

                className: "details-control",

                orderable: false,

                data: null,

                defaultContent: "",

                width: "10%"

            },

            { "data": "name" },

            { "data": "position" },

            { "data": "office" },

        ],

        select: {

            style: "os",

            selector: "td:not(:first-child)"

        },

​

    });

​

    // Add event listener for opening and closing details

    $("#sites tbody").on("click", "td.details-control", function() {

        var tr = $(this).closest("tr");

        var row = siteTable.row(tr);

​

        if (row.child.isShown()) {

            // This row is already open - close it

            destroyChild(row);

            tr.removeClass("shown");

        } else {

            // Open this row

            createChild(row, 1, row.data());

            tr.addClass("shown");

        }

    });

​

    $('#sites').on('draw.dt', function (e, settings) {

      console.log('sites > DataTable > draw.dt [' + new Date() + "]");

      console.log('Table ID: ', settings.nTable.id);

    });

});

​

​

​