Start another table by passing a parameter.

bndalia

When I click on a row of my table, a modal opens showing the data in different tabs. In one of the tabs I want to start another table, passing as a parameter a data of the row selected to be used in the server side query.

Need to help me because I do not know how to do it.

Thank you. Greetings.

colin

Hi @bndalia ,

This example here shows how child rows can be created as a new table - not what you're after, but it shows how to create tables dynamically. Hope that helps,

Cheers,

Colin

laurentP13

Hi @bndalia,
I've been spending most of my day yesterday on a similar issue. Not sure if this addresses your exact needs, but it could help others... I'm very new to this amazing package, please excuse me if there are other simpler or built-in solutions!

What it does is : 'dblclick on some row in table A' ==> 'open table B with search set to some values coming from A'.

Here's the code:

I have a 'contact' table and a 'company' table. Both tables are related through contact.fk_company = company.id

What I wanted is to open the 'company' table at the right position when one dblclicks on the contact.

So what I did was to add an event callback in table.contacts as this (thanks to @Desconhecido for posting the 'dblclick' to 'row data' part) :

$('#contacts tbody').on('dblclick', 'td', function () {

    // get row where event started
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    // fetch row data
    var lp_search_val = row.data().lp_contact.fk_company;

    // set value to pass to other page
    sessionStorage.setItem("lp_search_val", lp_search_val);

    // set desired action for the other window to know what to do
    sessionStorage.setItem("lp_search", 1);

    // open new window
    window.location = "companies.html";
        
} );

In the destination page, I had to add this inside the 'document ready' block :

// do we have a search action ?
if (sessionStorage.getItem("lp_search")) {
    // fetch search argument
    var lp_search_val = sessionStorage.getItem("lp_search_val");

    // set search field in table and draw
    var table = $('#companies').DataTable();
    table.search(lp_search_val).draw();

    // remove action to it is not performed forever
    sessionStorage.removeItem("lp_search");

}

Hope this helps!