Create a master-detail table

temerariomalaga

I was looking the official manual of Datatables and I found that: http://www.datatables.net/release-datatables/examples/server_side/row_details.html

I'm trying to make a master-detail table like this but I want to show the detail in other table, not in the master table. I think that I can get the content of the row I click and send it using AJAX to do the query and show the content in the detail table. I have the following code for load the datatables and can click in a row.
[code]$(document).ready( function () {
$('#PRESUP').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "single"
}
} );
$('#PRESUP_D').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "single"
}
} );
} );[/code]
PRESUP is the master table and PRESUP_D is the detail table. I need to add to this function other function for get the value of the clicked row and for send it to an AJAX file.

allan

So you want to load different data into the presup_d table? Use Ajax to get the new data and then fnClearTable and fnAddData to clear the existing data and then add the newly loaded data.

Allan

temerariomalaga

Now I have that code. I can select the data and send it to ajax and the PRESUP_D table it shows, but it isn't like a datatable, it's show like a simple html table.
[code]$(document).ready( function () {
var oTable=$('#PRESUP').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "single"
}
} );
oTable.$('tr').click( function () {
var data = oTable.fnGetData( this );
var serie=data[0];
var numero=data[1];
var nombre=data[3];
var vendedor=data[4];
$("#prueba1").val(serie);
$("#prueba2").val(numero);
$("#seriedel1").val(serie);
$("#numerodel1").val(numero);
$("#nombre1").val(nombre);
$("#vendedor1").val(vendedor);
load();
$("#eds").val(serie);
$("#edn").val(numero);
} );
var oTable2=$('#PRESUP_D').dataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sRowSelect": "single"
}

} );
oTable2.$('tr').click( function () {
var data = oTable.fnGetData( this );

} );
} );[/code]

allan

I'd need a link to the page to be able to see and understand what is going wrong I think.

Allan

temerariomalaga

I'm runing that on my wamp server. I send you and email with all the files and the tables of the database

allan

Thanks for the e-mail. Unfortunately I'm pressed for time at the moment and can't look through 500+ lines of code in detail. I don't see what the error would be immediately. If you could link me to a running page showing the issue, that would make it much faster for me to debug.

Allan

temerariomalaga

I've uploaded the files to a web server. Here you have the link of the page.
http://www.asp.2asir.ieslosmanantiales.es/presup.php
Thank you for all Allan.

allan

Thanks for the link. I'm afraid I don't see what the problem is though. The second table shows correctly as a DataTable with all the DataTables functions attached to it. It has no data, but then the plain HTML table is empty, so that explains why it is empty.

Allan

temerariomalaga

It's empty because I dont' load any data in here. When I click in a row of the first table I load the data using a mysql query filter by the values of the row I've selected. Try to click in the first row and data will be load and the data ins't load into the datatable and I don't know why it isn't load as datatable because the load of the data is the same like the load of the first table that I load with a mysql query too.

allan

Ah I see! Thanks for the explanation.

Its not working because you aren't using the DataTables API - you are overwriting and replacing the existing table and DataTables doesn't (and can't) know that you've done that...

Use fnAddData to add a new row to an existing table. Or `row.add()` in 1.10.

Allan

temerariomalaga

Ok thank you, I will try it when I arrive to my work. I'll tell you later if I have any problem.

temerariomalaga

Hi Allan, I try to use the fnAddData function but I don't know how to use this with the code I have. I don't know why I can to add the rows using the mysql query with ajax.

allan

Your `mostralle.php` Ajax request doesn't appear to be returning anything from the server. So I don't know how you would get data into the table from it either!

Allan

temerariomalaga

There are only 2 rows in the first table with reference to the second table. The first and the third row are there.