Cách xác định khi nào dữ liệu jQuery được tạo và được nạp với dữ liệu

Question

Tôi đang sử dụng phiên bản mới nhất của jQuery datatables. Có chức năng gọi lại nào mà tôi có thể sử dụng ngay sau khi dữ liệu đã được tải và hiển thị trong datatable không?

Tôi có một dữ liệu mà tôi đang thử nghiệm trong IE8. Tôi có 2 bộ dữ liệu mà tôi đang thử nghiệm (trong đó tôi chỉ sử dụng một bộ dữ liệu tại một thời điểm). Tôi có một mảng JavaScript và một tập hợp dữ liệu mà tôi nhận được từ một cuộc gọi Ajax. Tôi đang sử dụng ASP.NET MVC 3.

Cấu hình mà được dữ liệu của mình từ một cuộc gọi Ajax:

$('#banks-datatable').dataTable({ 
    "bProcessing": true, 
    "sAjaxSource": '/Administration/Bank/List', 
    "aoColumns": [ 
      { "sTitle": "Engine" }, 
      { "sTitle": "Browser" }, 
      { "sTitle": "Platform" }, 
      { "sTitle": "Version" }, 
      { "sTitle": "Grade" } 
    ], 
    "bAutoWidth": false, 
    "bFilter": false, 
    "bLengthChange": false, 
    "iDisplayLength": 10 
}); 

alert('test'); 

Khi DataTable tôi được nạp theo cách này DataTable được tạo ra (không có dữ liệu) và hộp chế biến màn hình và hiển thị cửa sổ bật lên cảnh báo. Tại thời điểm này, datatable là có nhưng không có dữ liệu đã được nạp vào datatable. Chỉ khi cửa sổ bật lên biến mất (khi tôi nhấp vào nút Ok trên cửa sổ bật lên) thì dữ liệu sẽ được tải vào dữ liệu. Tại sao điều này?

Cấu hình mà được dữ liệu của nó từ một mảng JavaScript:

var aDataSet = [ 
    ['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'], 
    ['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'], 
    ['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'], 
    ['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'], 
    ['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'], 
    ['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'], 
    ['Gecko', 'Firefox 1.0', 'Win 98+/OSX.2+', '1.7', 'A'] 
]; 

$('#banks-datatable').dataTable({ 
    "aoColumns": [ 
      { "sTitle": "Engine" }, 
      { "sTitle": "Browser" }, 
      { "sTitle": "Platform" }, 
      { "sTitle": "Version" }, 
      { "sTitle": "Grade" } 
    ], 
    "bAutoWidth": false, 
    "bFilter": false, 
    "bLengthChange": false, 
    "iDisplayLength": 10, 
    "aaData": aDataSet 
}); 

alert('test'); 

Các DataTable được tạo ra và dữ liệu được nạp và sau đó chỉ làm màn hình hiển thị popup. Điều này khác với kịch bản đầu tiên. Tại sao điều này là trường hợp?

Nếu tôi đi với kịch bản đầu tiên, có cách nào để tôi có thể xác định thời điểm dữ liệu được tạo và tải dữ liệu không?

Với kiểm tra này, tôi muốn nó được tổng quát để nó có thể được sử dụng những gì bao giờ cách tôi quyết định để tải nó với dữ liệu.

Answer 1

Bạn có thể sử dụng chức năng fnDrawCallback. Nó được gọi mỗi khi bảng được vẽ. Điều này sẽ bao gồm khi bảng được tải với dữ liệu, sắp xếp hoặc lọc.

Answer 2

Tôi luôn biết javascript là một chuỗi duy nhất. Đây là một bài để hỗ trợ rằng:

Is JavaScript guaranteed to be single-threaded?

Trong kịch bản đầu tiên bạn đang nhận được dữ liệu từ máy chủ, và sau đó cầm lên sợi chỉ với một hộp cảnh báo. Trong kịch bản thứ hai, bạn điền trước dữ liệu. Tôi tin rằng đó là sự khác biệt.

Trang này cho thấy làm thế nào để gọi một cuộc gọi lại vào thành công:

http://datatables.net/usage/callbacks#fnServerData

// POST data to server 
$(document).ready(function() { 
    $('#example').dataTable({ 
    "bProcessing": true, 
    "bServerSide": true, 
    "sAjaxSource": "xhr.php", 
    "fnServerData": function (sSource, aoData, fnCallback) { 
     $.ajax({ 
     "dataType": 'json', 
     "type": "POST", 
     "url": sSource, 
     "data": aoData, 
     "success": fnCallback 
     }); 
    } 
    }); 
}); 

Answer 3

Bạn tốt hơn sử dụng fnInitComplete:

$(document).ready(function() { 
    $('#example').dataTable({ 
     "fnInitComplete": function (oSettings, json) { 
      alert('DataTables has finished its initialisation.'); 
     } 
    }); 
}) 

Answer 4

Bạn cũng có thể sử dụng dataSrc như remplacement cho "thành công" vì nó không nên quá tải:

Ở đây với ví dụ điển hình của datatables.net

var table = $('#example').DataTable({ 
    "ajax": { 
      "type" : "GET", 
      "url" : "ajax.php", 
      "dataSrc": function (json) { 
       //Make your callback here. 
       alert("Done!"); 
       return json.data; 
       }  
      }, 
    "columns": [ 
      { "data": "name" }, 
      { "data": "position" }, 
      { "data": "office" }, 
      { "data": "extn" }, 
      { "data": "start_date" }, 
      { "data": "salary" } 

     ] 
    }); 

Answer 5

Trên phiên bản mới của DataTable JQuery, phương pháp này được gọi là: initComplete

https://datatables.net/reference/option/initComplete