web-dev-qa-db-ja.com

jQueryデータテーブルがいつ作成され、データが読み込まれるかを判断する方法

jQuery datatablesの最新バージョンを使用しています。データがロードされてデータテーブルに表示された直後に使用できるコールバック関数はありますか？

IE8で実験しているデータテーブルがあります。テストに使用しているデータは2セットあります（そのうちの1セットを一度に使用します）。 JavaScript配列と、Ajax呼び出しから取得した一連のデータがあります。 ASP.NET MVC 3を使用しています。

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

この方法でデータテーブルがロードされると、データテーブルが作成され（データなし）、処理ボックスが表示され、アラートポップアップが表示されます。この時点でデータテーブルはありますが、データテーブルにデータはロードされていません。ポップアップが消えたときのみ（Ok]ボタンをクリックしたとき）、データがデータテーブルに読み込まれます。なぜですか？

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

データテーブルが作成されてデータが読み込まれ、ポップアップ表示のみが行われます。これは最初のシナリオとは異なります。これはなぜですか？

最初のシナリオを使用する場合、データテーブルがいつ作成され、データが読み込まれたかを判断する方法はありますか？

このチェックでは、データをロードすることを決定したどのような方法でも使用できるように、一般的なものにしたいと考えています。

javascriptjqueryjquery-pluginsinternet-explorer-8
15
Brendan Vogt

fnDrawCallback 関数を使用できます。テーブルが描画されるたびに呼び出されます。これには、テーブルにデータがロードされたとき、並べ替えられたとき、またはフィルターされたときが含まれます。

13
Jason Towne

fnInitCompleteを使用するほうがよいでしょう。

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

JQuery DataTableの新しいバージョンでは、メソッドは次のように呼び出されます。 initComplete()

7
Drako

私は、JavaScriptがシングルスレッドであることを常に知っていました。これをサポートする投稿は次のとおりです。

JavaScriptはシングルスレッドであることが保証されていますか？

最初のシナリオでは、サーバーからデータを取得し、アラートボックスでスレッドを待機しています。 2番目のシナリオでは、データを事前入力します。それが違いだと思います。

このページ は、成功時にコールバックを呼び出す方法を示しています。

 // 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
       } );
     }
   } );
 } );
2
JoeH-Java

オーバーロードされるべきではないので、「成功」の置き換えとしてdataSrcを使用することもできます。

ここでは、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" }

        ]
    } );
0
Joseph Garrone

DatatableはInitCompleteオプションを提供します。使用できます。それが役立つかもしれません

$('#example').DataTable({
  "initComplete": function(){
    alert('Data loaded successfully');
  }
});

リンク-> https://datatables.net/reference/option/initComplete

0
Junaid Nazir