How to load a child datatable on selecting a row from the main datatable?

raj44

Hi Folks,

I have a specific requirement regarding datatables... I need to populate 3 datatables in my GUI page in which the first table is the parent table and the other two are its child tables. When a user selects a single or multiple rows in the parent table it should populate the according records in the child tables. What I am looking is I need to execute an event or a function on selecting a row in the main table in which I generate the child datatables.... Can anyone please help me out on this? I have searched the forums but did not find a similar doubt...

The data in the datatables is obtained through servlets which points to the sql queries(which selects records from a database). The tables are linked by foreign key..

As per my understanding I guess I need to call an ajax func or an ajax event...but I am unable to proceed further..So it would be really amazing if you'll can help me ...

Thanks,
raj

rewen

Hi raj44,

Do you have any code in place for the row selection part of your UI? If not then maybe start simple with checkboxes in each row and listen for checkbox change events with jQuery, on the table level:

[code]// listen for checkboxes to be checked in the table
$('your-table-selector').on('change', 'input[type=checkbox]', function(event) {
// grab all of the checked checkbox values
var values_array = $(event.delegateTarget).find('input[type=checkbox]:checked').map(function() {
return this.value;
}).get();

// do something with the values such as create a new datatable or change the filtering or ajax source of an existing one...
you're on your own for this part
});[/code]

trudrung

You could build a element for the parent table and set onclick handlers for every TR element. The onclick would then update the child tables.