DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

ChildRows of related Tabel

ChildRows of related Tabel

KennethWintherKennethWinther Posts: 5Questions: 2Answers: 0
in Free community support

Hello everybody :)
I've followed this example: https://datatables.net/examples/api/row_details.html.
I've used it in my MVC5 ASP .NET App With EntiyFrameWork DataBase first and it worked fine :)
Except for one thing.
My problem is, how do I fill the child rows with the related data to my main table.
The example just fills child row with data from one table.
I need the child rows to be exactly that - a result of the parent table.
So when I have a 1-* (1 Service - many ServiceTexts). I get all the data just fine when I Query the model.
But the table

 function format(d) {
                // `d` is the original data object for the row
                return '<table cellpadding="5" cellspacing="0" border="1" style="padding-left:50px;">' +
                    '<tr>' +
                    '<td>Dags dato:</td>' +
                    '<td>' + d.Dagsdato + '</td>' +
                    
                    '<td>Udført af:</td>' +
                    '<td>' + d.udføresaf + '</td>' +
                                      
                    '<td>Tid:</td>' +
                    '<td>' + d.Tid + '</td>' +
                    
                    '<td>Tidsforbrug:</td>' +
                    '<td>' + d.Tidsforbrug + '</td>' +
                                       
                    '<td>Part SN:</td>' +
                    '<td>' + d.itemID + '</td>' +
                    
                                        
                    
                    '<td>Text:</td>' +
                    '<td>' + d.Text + '</td>' +
                    
                    
                    '<td>ServiceID:</td>' +
                    '<td>' + d.ServiceID + '</td>' +
                    '</tr>'                   
                    '</table>';
            }

returns Undefined. I don't understand how the table would know what d is and if i only have to replace d with something
for this to work.
Can anyone help? This is driving me crazy.

Answers

  • KennethWintherKennethWinther Posts: 5Questions: 2Answers: 0

    EDIT:
    I think the problem lies here somewhere in the lower part where:
    // Add event listener for opening and closing details.
    Seems like this is not beeing used or returning nothing.
    The Ajax option url:home/GetService works fine for the DataTable.
    So i states this for the GET pat of the small table aswell.
    Is this wrong?

               $(document).ready(function () {
                var table = $('#myDatatable').DataTable({
                    "ajax":
                    {
                        "url": '/home/GetService',
                        "type": "GET",
                        "datatype": "json"
                    },
                    "columns": [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": '',
                            "render": function () {
                                return '<i class="fa fa-plus-square" aria-hidden="true"></i>';
                            },
                            width: "15px"
                        },

                        { "data": "ServiceID", "autoWidth": true },
                        { "data": "ServiceNo", "autoWidth": true },
                        { "data": "BevNr", "autoWidth": true },
                        { "data": "Regnr", "autoWidth": true },
                        { "data": "TaxaMeterNr", "autoWidth": true },
                        { "data": "CanipNr", "autoWidth": true },
                        { "data": "TomTomNr", "autoWidth": true },
                        { "data": "XXX", "autoWidth": true },
                        {
                            "data": "ServiceID", "width": "50px", "render": function (data) {
                                return '<a class="popup" href="/home/save/' + data + '">Edit</a>';
                            }
                        },
                        {
                            "data": "ServiceID", "width": "50px", "render": function (data) {
                                return '<a class="popup" href="/home/delete/' + data + '">Delete</a>';
                            }
                        }
                    ],
                    "order": [[1, 'asc']]
                });

                // Add event listener for opening and closing details
                $('#myDatatable tbody').on('click', 'td.details-control', function () {
                    var tr = $(this).closest('tr');
                    var row = table.row(tr);
                    var idx = $.inArray(tr.attr('ServiceID')); //??
                    $.ajax({
                        type: 'GET',
                        url: '/home/GetServiceText',
                        data: 'row=' + tr.attr('ServiceID'),
                    })

                    if (row.child.isShown()) {
                        // This row is already open - close it
                        row.child.hide();
                        tr.removeClass('shown');
                    }
                    else {
                        // Open this row
                        row.child(format(row.data())).show();
                        tr.addClass('shown');
                        $('div.slider', row.child()).slideDown();
                    }
                });
This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.