Nested datatables

ricgom731

I have a table nested in a main table.
In the ajax property of the main table and the detail table I get the data from an action that returns a Json list that consults a Mysql DB.
when I open the detail with a "+" button) of record one it shows the detail data well, but if I open the detail of record two (without closing the detail of record one) it only shows the structure of the detail table but without data.

on the other hand, if I open the detail of record 10 it shows the detail data correctly, and if later I open the detail of record 9 (without closing the detail of record 10) if it shows the detail data well, that is, if I see the detail of both registers open simultaneously
What I want is that I can open several details simultaneously, but I don't know because if I open them in ascending order, it only shows me the detail of the first record that I open. please help.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

ricgom731

HTML

	LAST NAME	FIRST NAME	NAME	DEPT.

SCRIPT
$(document).ready(function () {
var table = $("#table_id").DataTable({

        "processing": false,
        "ordering": false,
        "serverSide": true,
        "ajax": {
            "url": "@Url.Content("~/Di01person/Json")",
            "type": "POST",
            "datatype":"json"
            },



        "filter": true,
            "responsivePriority": 1,
            "pageLength": 15,
            "lengthChange": false,
            "data": null,                

          "columns": [
              {
                  "className": 'details-control',
                  "orderable": false,                      
                  "data": null,              
                  "defaultContent": ''
              },
            { "data": "ape_pate", "name": "LAST NAME", "autoWidth": true },
            { "data": "ape_mate", "name": "FIRST NAME", "autoWidth": true },
            { "data": "nom_prop", "name": "NAME", "autoWidth": true },
            { "data": "num_dept", "name": "DPET.", "autoWidth": true }


        ]

        });




                    // Add event listener for opening and closing details
        $('#table_id tbody').on('click', 'td.details-control', function () {
            event.stopImmediatePropagation();
            var tr = $(this).closest('tr');
            var row = table.row(tr);                

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                //destroyChild(row);
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();                    
                tr.addClass('shown');                                        
                var l_num_pers = row.data()["num_pers"];
                var Myurl = null;
              //Parameter to send nested datatable
                Myurl = "@Url.Action("Json", "DetailConroller", new { area = "Directory", ag87_num_pers = "parametro" })";
                Myurl = Myurl.replace("parametro", l_num_pers)


                //*********************************************************

                $('#Detail').DataTable({                 
                    "processing": false,
                    "ordering": false,
            "serverSide": true,                        
                    "ajax": {                            
                        "url": Myurl,
                        "type": "POST",
                        "datatype": "json"
                    },                        
                    "bRetrieve": true, 
                    "filter": false,
                    "responsivePriority": 1,
                    "pageLength": 15,
                    "lengthChange": false,
                    "paging": true,                        
                    "deferRender": true,                        
                    "data": null,                        
                    "columns": [
                        { "data": "num_pers", "name": "NO. PERSONAL", "autoWidth": true },
                        { "data": "num_cont", "name": "TELEFONO", "autoWidth": true },
                        { "data": "clv_medi", "name": "CVE MEDIO", "autoWidth": true }
                    ]
                });
            }
        });


        function format() {
            debugger;
            return '<table id = "Detail" style = "background-color:white" class="table table-striped   table-primary table-borderless" > ' +
                '<thead>' +
                '<tr >' +
                '<th style=" text-align:left">' +
                'NO. PERSONAL' +
                '</th>' +
                '<th style=" text-align:left">' +
                'CVE MEDIO' +
                '</th>' +
                '<th style=" text-align:left">' +
                'TELEFONO   ' +
                '</th>' +
                '</tr>' +
                '</thead>' +
                '<tbody></tbody>' +
                '</table>' ;
        }








})

kthorngren

If you can't post a link to the page then you will need to do some debugging to let us know what is happening.

Do things like checking the browser's console for errors. Debug the Ajax request/response using the browser's network inspector tool.

Take a look at this blog about ajax loaded detail records. Maybe it will help with your process.

Kevin