Datables instantiation and dynamically linked tables

david.j.meyer2@boeing.com

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

I have a "parent" table that when a user selects a record I use the "parent.id" to populate and load nine other tables. I have it functioning but I want to minimize the ajax calls on the page to improve performance. The question i have is there a way to instantiate the 9 "child" tables to be empty without making an ajax call when the page loads. Only when a user selects a record i do i want the table to "draw" using the "Parent.Id" to display the appropriate data.

What I'm picturing is a table definition like this for the child table(s) on document ready and parent deselect.

$('#childTable').DataTable()

$('#parentTable').DataTable().on('deselect', function (e, dt, type, cell, originalEvent) {
$('#childTable').DataTable()
});

Then on parent select do something like this.

$('#parentTable').DataTable().on('select', function (e, dt, type, cell, originalEvent) {

childT = $('#childTable').DataTable({
    dom: 't',
    ajax: {
        url: relativePath + "/api/childtable",
        type: 'POST',
        cache: false,
        "data": function (d) {
            if ($('#parentTable').length && $('#parentTable').DataTable().row({ selected: true }).data() != null) {
                d.PARENT_ID= $('#parentTable').DataTable().row({ selected: true }).data().PARENT.ID;
            }
            else
                // Set to -1 to return no data if no selected record or no data in parent
                d.PARENT_ID= "-1";
        }
    },
    //processing: true,
    serverSide: true,
    idSrc: "CHILD.ID",
    columns: [
        { data: "child.ID" },            
        { data: "child.PARENT_ID" },
        { data: "child.S_CODE" },
        { data: "child.S_CAGE_CD" },
        { data: "child.S_STATUS" },
        { data: "child.S_EXPORT_COUNTRY" },
        { data: "child.S_ADDR1" },
        { data: "child.S_ADDR2", },
        { data: "child.S_CITY" },
        { data: "child.S_STATE_PROV" },
        { data: "child.S_STATE_PROV_CD" },
        { data: "child.S_COUNTRY" },
        { data: "child.S_POSTAL_CD" }
    ],
    sScrollX: true,
    scrollCollapse: true,
    fixedHeader: true
  });

});

This way we are doing no ajax calls when all i want is an empty table if no parent record is selected. Will this work or is there a better way to do this?

colin

You could do something like this here. It's not setting up any ajax at initialisation, but doing it on an event - in this case a button click.

Would that work for you?

Colin