1

ページで実行されるコードがあります。ページには 3 つのタブがあり、各タブにはテーブルと 2 つの日付入力フィールド、およびリクエストを送信するためのボタンが含まれています。JSはこんな感じ。

$(document).ready(function(){
    var tbl1 = $("tbl1").dataTable(){ //a lots of parametres}
    .. //2 more tbl2 and tbl3 variable initialization

    $("btn1").click(function(){
        tbl1.fnReloadAjax(tbl.oSettings());
    });
    ..//2 more btn2 and btn3 action initialization
})

初めてページをロードすると、日付入力フィールドは 10 日間にまたがり、テーブルには過去 10 日間のレコードが含まれます。サーバーからレコードを削除する新しい ajax リクエストがあり、テーブルの内容を更新する必要があります。各行にボタンがあり、それを押すとサーバー上のこのレコードが削除されます。すべて正常に動作しますが、変更を確認するにはページ全体をリロードする必要があります。私はこのようにしようとしました：

function removeData(source){
     $.post('delete_record',{}, function ...)// ajax request to remove data
     alert("deleted");  // notice to user that record was deleted
     tbl1.fnReloadAjax(tbl1.oSettings()); // ERROR no ref to tbl1(trying to update table content)
}

エラーは、removeData 関数内に tbl1 オブジェクトへの参照が存在しないためです。これは、tbl1 が $(document).ready 関数内で定義されているためです。tbl1 へのリンクを取得する方法

関数 ready() からテーブル初期化コードを取り出しようとしました。何かのようなもの

var getoTabele = function(){
  var oTable = $("tbl1").dataTable..... //initialization code
  ...
  ...
  return oTable;
}

removeData 関数内でリンクを取得できるため、removeData 関数内で oTable を使用できるようになりました

var oTable = getoTable() // Data warning. Cannot reinitialise DataTable

これは、関数 getoTable が新しい oTable を作成し、古いものを参照していないためです。

4

2 に答える 2

2

bRetrieveparamを使用します：

function removeData(source){
     (...)

     // this will return the previous, already initialized dataTable object.
     var tbl1 = $("tbl1").dataTable({'bRetrieve':true});

     tbl1.fnReloadAjax(tbl1.oSettings()); 
}
于 2012-07-11T08:23:32.727 に答える
0

tblNの外で変数を定義して$(document).ready()から、関数でそれらにアクセスします。

var tbl1, tbl2, tbl3;
$(document).ready(function(){
    // **** //
    tbl1 = $("tbl1").dataTable();
});

function removeData() {
    // **** //
    tbl1.fnReloadAjax(tbl1.oSettings());    
}
于 2012-07-11T08:20:26.363 に答える