Create a master-detail table

Create a master-detail table

temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
edited March 2014 in DataTables 1.9
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.

Replies

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    edited April 2014
    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]
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    I'd need a link to the page to be able to see and understand what is going wrong I think.

    Allan
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    edited April 2014
    I'm runing that on my wamp server. I send you and email with all the files and the tables of the database
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    Ok thank you, I will try it when I arrive to my work. I'll tell you later if I have any problem.
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    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.
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    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
  • temerariomalagatemerariomalaga Posts: 16Questions: 0Answers: 0
    There are only 2 rows in the first table with reference to the second table. The first and the third row are there.
This discussion has been closed.