/*

 * Based on the code here:

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

*/

​

var showAllFlag = null;

​

function showAll( flag ) {

  showAllFlag = flag;

  $("#sites").DataTable().draw(false);

}

​

function createChild_2(row) {

    var rowData = row.data();

​

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

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

​

    // Display it the child row

    row.child(table).show();

    table.parent().css('background', '#7ac470');

​

    // Editor definition for the child table

    var usersEditor_2 = new $.fn.dataTable.Editor({

        idSrc: 'name',

        table: table,

        fields: [

            {

                label: "Name:",

                name: "name"

            },

            {

                label: "Position:",

                name: "position"

            },

            {

                label: "Office:",

                name: "office"

            },

            {

                label: "Salary:",

                name: "salary",

            }

        ]

    });

​

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

    var usersTable_2 = table.DataTable({

        dom: "Bfrtip",

        pageLength: 5,

        rowId: 'name',

        data: [rowData],

        columns: [

            { title: "Name", data: "name" },

            { title: "Position", data: "position" },

            { title: "Office", data: "office" },

            { title: "Salary", data: "salary" }

        ],

        select: true,

        buttons: [

            { extend: "create", editor: usersEditor_2 },

            { extend: "edit", editor: usersEditor_2 },

            { extend: "remove", editor: usersEditor_2 }

        ]

    });

​

}

​

​

function createChild(row) {

    var rowData = row.data();

​

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

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

​

    // Display it the child row

    row.child(table).show();

    table.parent().css('background', '#90b2e8');

​

    // Editor definition for the child table

    var usersEditor = new $.fn.dataTable.Editor({

      idSrc: 'name',

        table: table,

        fields: [

            {

                label: "Name:",

                name: "name"

            },

            {

                label: "Extension:",

                name: "extn"

            },

            {

                label: "Start Date:",

                name: "start_date"

            },

            {

                label: "Salary:",

                name: "salary",

            }

        ]

    });

​

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

    var usersTable = table

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

         e.stopPropagation();

      })

    .DataTable({

        dom: "Bfrtip",

        pageLength: 5,

        rowId: 'name',

        data: [rowData],

        columns: [

            {

                className: "details-control",

                orderable: false,

                data: null,

                defaultContent: "",

                width: "10%"

            },

            { title: "First name", data: "name" },

            { title: "Last name", data: "extn" },

            { title: "Phone #", data: "start_date" },

            { title: "Location", data: "salary" }

        ],

        select: true,

        buttons: [

            { extend: "create", editor: usersEditor },

            { extend: "edit", editor: usersEditor },

            { extend: "remove", editor: usersEditor }

        ]

    });

    // Add event listener for opening and closing details

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

        e.stopPropagation();  // Make sure the Parent event doesn't execute

        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_2(row);

            tr.addClass("shown");

        }

    });

​

​

}

​

function updateChild(row) {

    $("table", row.child())

        .DataTable()

        .ajax.reload();

}

​

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 siteEditor = new $.fn.dataTable.Editor({

        table: "#sites",

      idSrc: 'name',

        fields: [

            {

                label: "Site name:",

                name: "name"

            },

            {

                label: "Site position:",

                name: "position"

            }

        ]

    });

​

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

        dom: "Bfrtip",

        ajax: "/ajax/objects.txt",

        rowId: 'name',

        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)"

        },

        buttons: [

            { extend: "create", editor: siteEditor },

            { extend: "edit", editor: siteEditor },

            { extend: "remove", editor: siteEditor }

        ]

    });

​

    // Add event listener for opening and closing details

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

      showAllFlag = null;

        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);

            tr.addClass("shown");

        }

    });

​

    // When updating a site label, we want to update the child table's site labels as well

    siteEditor.on("submitSuccess", function() {

        siteTable.rows().every(function() {

            if (this.child.isShown()) {

                updateChild(this);

            }

        });

    });

  siteTable.on('draw', function () {

​

    if ( showAllFlag === null ) {

      return;

    }

    if ( showAllFlag ) {

      var table = $("#sites").DataTable();

      table.rows( {page: 'current'} ).every(function ( rowIdx, tableLoop, rowLoop ) {

​

        createChild(this);

        $(this.node()).addClass("shown");

​

        // Find the child detail Datatable

        var childTable = $(this.node()).next('tr').find('table').DataTable();

​

        // Loop through the child Datatable to open child rows

        childTable.rows().every(function ( rowIdx, tableLoop, rowLoop ) {

          createChild_2(this);

          $(this.node()).addClass("shown");

        });

​

      } );

    } else {

      var table = $("#sites").DataTable();

      table.rows( {page: 'current'} ).every(function ( rowIdx, tableLoop, rowLoop ) {

​

        if (this.child.isShown()) {

​

          // Find the child detail Datatable

          var childTable = $(this.node()).next('tr').find('table').DataTable();

​

          // Loop through the child Datatable to open child rows

          childTable.rows().every(function ( rowIdx, tableLoop, rowLoop ) {

            destroyChild(this);

            $(this.node()).removeClass("shown");

          });

​

          // Then destroy the first level child 

          destroyChild(this);

          $(this.node()).removeClass("shown");

​

        }

      } );

    }

  });

  $('#show').on('click', function () {

    showAll(true);

  });

​

  $('#hide').on('click', function () {

    showAll(false);

  });

​

});

​

​

​