Блог

Я следовал примеру jQuery Datatable — скользящие дочерние строки (просто посмотрите раздел «Полный код» на этой странице) в моем ASP.NET Проект MVC, и я мог бы правильно перечислить основные и статические данные. Однако, когда я хочу динамически извлекать подробные данные с помощью AJAX, я не могу правильно их перечислить из-за ошибки TypeError: table.fnOpen не является функцией. Существует решение, изменяющее D ataTable на d ataTable, но в этом случае я сталкиваюсь с другими ошибками. Проблема именно в методе click amp; format, и я думаю, что я допустил ошибку в каком-то определении. Не могли бы вы взглянуть и разъяснить мне, в чем ошибка? Заранее спасибо…

 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');
            });
        }
    }); 

}); 
  

Обновление I: ниже приведен модифицированный метод format():

 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 htmlResu<
}