Cannot list details data in jQuery Datatable

Question

I followed jQuery Datatable - Sliding child rows example (just look at "Complete code" section on that page) in my ASP.NET MVC project and I could listed master & static details data properly. However, when I want to retrieve details data dynamically via AJAX, I cannot listed them properly due to an error TypeError: table.fnOpen is not a function. There is a solution changing DataTable to dataTable, but in this case I encounter another errors. The problem is exactly on the click & format method and I think I made a mistake for some definition. Could you please have a look at and clarify me about where the mistake is? Thanks in advance...

function format(d) {
    return '<div class="slider">' +
    '<table style="width:100%">' +
      '<tr>' +
            '<th>Name</th>' +
            '<th>Surname</th> ' +
            '<th>Number</th>' +
        '</tr>' +
        '<tr>' +
            '<td>' + d.StudentName + '</td>' +
            '<td>' + d.StudentSurname + '</td> ' +
            '<td>' + d.StudentNumber + '</td>' +
        '</tr>' +
    '</table>'
    '</div>';
}


$(document).ready(function () {

    var table;
    table = $('#dtbLabGroup')
        .DataTable(

        //code omitted for brevity

        "columns": [
                    {
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    { "name": "Lab" },
                    { "name": "Schedule" },
                    { "name": "Term" },
                    { "name": "Status" }
        ],          
        "order": [[1, 'asc']],
    });


    // Add event listener for opening and closing details
    $('#dtbLabGroup tbody').on('click', 'td.details-control', function () {

        // !!! There might be a problem regarding to these 3 parameters
        var tr = $(this).closest('tr');
        var row = table.row(tr);            
        var nTr = $(this).parents('tr')[0];
        //

        if (row.child.isShown()) {
            // This row is already open - close it
            $('div.slider', row.child()).slideUp(function () {
                row.child.hide();
                tr.removeClass('shown');
            });
        }
        else {
            // Open this row
            row.child(format(row.data()), 'no-padding').show();
            tr.addClass('shown');

            $('div.slider', row.child()).slideDown();

            // !!! There is PROBABLY a problem
            // !!! I added the following code for retrieving data via AJAX call. 
            var id = 8; //used static id for testing
            $.get("GetStudents?id=" + id, function (students) {
                table.fnOpen(nTr, students, 'details');
            });
        }
    }); 

});

Update I: Here is the modified format() method below:

function format(d) {
    var htmlResult = '<div class="slider">' +
    '<table style="width:100%">' +
      '<tr>' +
            '<th>Name</th>' +
            '<th>Surname</th> ' +
            '<th>Number</th>' +
        '</tr>';

       $.each(d, function (i, d) {
           htmlResult += '<tr><td>' + d[i].StudentName + '</td><td>' + d[i].StudentSurname + '</td><td>' + d[i].StudentNumber + '</td></tr>';
       });

    htmlResult += '</table>' +
    '</div>';
    return htmlResult;
}

fnOpen is v1.9 syntax, which is why changing Datatables to datatables is a solution. The example you've linked to doesn't use fnOpen at all - so I wonder why you've used it? see here — markpsmith
– markpsmith, Commented Oct 12, 2016 at 12:50
Because I have to use AJAX call to load data and there is fnOpen method in the example I found. Is there a better example without fnOpen? Thanks... — Jack
– Jack, Commented Oct 12, 2016 at 13:01
No, I use v1.10 and I know I should not use fnOpen. The only think I need a format(row.child); method (having an AJAX call) that is callked from // Open this row section. Any example usage of it please? Thanks a lot... — Jack
– Jack, Commented Oct 12, 2016 at 13:13
I still don't understand what you're trying to use fnOpen for... — markpsmith
– markpsmith, Commented Oct 12, 2016 at 13:15

Gyrocode.com · Accepted Answer · 2016-10-13 13:07:23Z

2

You need to show loading indicator in the child row, retrieve content via Ajax and inject it into the child row replacing loading indicator.

For example:

// ... skipped ...

// Open this row
row.child('<p><center>Loading...</center></p>', 'no-padding' ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();

$.getJSON("GetStudents?id=" + id, function(data){
   $('td', row.child()).html(format(data));
   $('div.slider', row.child()).show();
});

// ... skipped ...

See this example for code and demonstration.

edited Oct 13, 2016 at 13:07

answered Oct 12, 2016 at 13:56

Gyrocode.com

59k16 gold badges157 silver badges192 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jack Over a year ago

Thanks for reply. Actually I encountered a freezing problem when loading child data. Is the child record rows causing this freezing? If so, do I have to use "loading indicator"? On the other hand, is it better to use asynchronous in the AJAX call?

Gyrocode.com Over a year ago

@ClintEastwood, Ajax request is asynchronous by default, that is why there is a need for loading indicator (Loading...). Synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

Jack Over a year ago

There is just a little problem causing the loading indicator loops forever. I added the format code in my question. Could you please have a look at it and clarify me how to create loop properly for the multiple child records?

Gyrocode.com Over a year ago

@ClintEastwood, there is syntax error in your updated code, instead of '</tr>' + should be '</tr>';. Check the console for errors.

Jack Over a year ago

Thanks, but the problem is related to obtaining data parameters in the array and no error except from this. Please underestimate the tr error and just have a look at how to obtain the record values in a loop?

|

Collectives™ on Stack Overflow

Cannot list details data in jQuery Datatable

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related