Concept design - want to know if this is possible.

SammySmith

Hi all,

I have been asked to complete a project that was previously started by someone else so I've picked it up in the middle.

The general idea is this:

Page 1: simple html/php page that has a form that submits some search terms.
Page 2: Datatable using serverside data. The values from the original form are passed to a server side script which returns some json data that's formatted in a datatable.

Thus far, everything appears to be working ok.

On this page, the requirement is for there to be a button in the table. When this is pressed, a hidden div on the page is shown.

In this div, there should be another datatable which takes a value from a field in the first table and passes it to a different server side script that also returns json with a view to populate the table.

Everything here appears to be working. I can see the json response but the data doesn't ever get loaded in the table.

Before I go down the rabbit hole - Is it even possible to have chained tables like this??

I don't want to use child rows as it wouldn't fit with the rest of the website.

kthorngren

This blog shows how to use a child table based on the selected row in the parent table:
https://datatables.net/blog/2016-03-25

If you aren't using Editor you can ignore those parts.

Kevin

SammySmith

Thanks Kevin,

Following the example, I was able to get about half-way to where I wanted to get to.

I now have 2 tables on a page which are linked using a hidden column. The second table is empty and stored in a hidden div until a row is selected in the first table.

My new problem is that I want to hide the pagination, info, search and length on the first table when there's a row selected (I need the screen space for the second table).

I thought I could get away with;

    Table1.on( 'select', function () {
    Table1.row( { selected: true } ).data()[0];
    Table1.rows({ selected: false }).nodes().to$().css({"display":"none"});
    $('.dataTables_paginate').css("display", "none");
    $('.dataTables_info').css("display", "none");
    $('.dataTables_filter').css("display", "none"); 
    $('.dataTables_Length').css("display", "none"); 
    $("#Result2").show();
    Table2.ajax.reload();
    });

    Table1.on( 'deselect', function () {
    Table1.rows({ selected: false }).nodes().to$().css({"display":""});
    $('.dataTables_paginate').css("display", "block"); 
    $('.dataTables_info').css("display", "block"); 
    $('.dataTables_filter').css("display", "block");    
    $('.dataTables_Length').css("display", "block"); 
    $("#Result2").hide();
    Table2.ajax.reload();
    });

but this hides the pagination etc on both of the tables. I thought about using the DOM but can't see a way to modify it after selection - Am I barking up the wrong tree or is there a solution to this that I haven't found?

allan

Very close! Use table().container() to get the container node for the table - e.g.:

$('.dataTables_info', Table1.table().container()).css('display', 'none');

Allan

SammySmith

Thank you Allan,

Without trying to sound too loved up, you continue to amaze me a little more each day.

Sam