無法在jQuery中列出詳細信息數據表

Question

我在我的ASP.NET MVC項目中遵循jQuery Datatable - Sliding child rows示例（僅查看該頁面上的「完整代碼」部分），並且我可以正確列出主要的&靜態細節數據。但是，當我想通過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'); 
      }); 
     } 
    }); 

}); 

更新我：下面是修改的格式（）方法如下：

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代碼和示範。