Question

我在我的ASP.NET MVC项目中跟随了jQuery Datatable - Sliding child rows示例（只看了＃34;完整代码＆＃34;该页面上的部分），我可以列出master＆amp;静态细节数据正确。但是，当我想通过AJAX动态检索细节数据时，由于错误 TypeError：table.fnOpen不是函数，我无法正确列出它们。有一个解决方案将 D ataTable更改为 d ataTable，但在这种情况下我遇到了其他错误。问题恰恰在于点击和放大格式方法，我认为我犯了一些错误的定义。你能不能看看并澄清我的错误在哪里？提前谢谢......

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 htmlResult;
}

Answer 1

您需要在子行中显示加载指示符，通过Ajax检索内容并将其注入替换加载指示符的子行。

例如：

// ... 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 ...

请参阅this example以获取代码和演示。

无法在jQuery Datatable中列出详细信息数据

1 个答案: