jEditable＆DataTables - 更新時にテーブルが更新されない

Question

jEditableプラグインがインストールされた状態でjQuery DataTablesを使用しています。私はすべて正常に動作している、テーブルをレンダリングし、データを正しく取得します。テーブルが編集可能で、スクリプトがバックエンドDBを正しく更新しています。唯一の問題は、値が更新され、次にリフレッシュして新しい値が表示されるまでセルが空であることです。

私はfnDrawをコールバックに組み込み、テーブルを再描画するようにしましたが、それを把握することができませんでしたか？私が欠けている唯一の事は、新しい値がDBに書き込まれた後にテーブルを動的にリフレッシュさせることです。あなたのコードは正常に見えるよう、これは何の違いを作るべきではありませんが、関数の外で変数oTableを初期化し、参照

<script> 
$(document).ready(function() { 
/* Init DataTables */ 
var oTable = $('#district').dataTable(); 

/* Apply the jEditable handlers to the table */ 
$('#district', oTable.fnGetNodes()).editable('lib/editable_ajax.php', { 
    tooltip : 'Click cell to edit value...', 
    indicator : 'Saving...', 
    style : 'display:block;', 
    submit : 'OK', 
    cancel : 'Cancel', 
    data : " {'PDC 30':'PDC 30','PDC 14':'PDC 14','PDC 81':'PDC 81','PDC 58':'PDC 58'}", 
    type : 'select', 
    "Callback": function(sValue, x) { 
     var aPos = oTable.fnGetPosition(this); 
     oTable.fnUpdate(sValue, aPos[0], aPos[1]); 

     /* Redraw the table from the new data on the server */ 
     oTable.fnClearTable(0); 
     oTable.fnDraw(); 
    }, 
    "submitdata": function (value, settings) { 
     var aPos2 = oTable.fnGetPosition(this); 
     var id2 = oTable.fnGetData(aPos2[0]); 
     return { 
      "row_id": this.parentNode.getAttribute('id'), 
      "id2": id2[0], 
      "column": oTable.fnGetPosition(this)[ 2 ]   
     }; 
    }, 
    "height": "14px", 
}); 
}); 
</script> 

Answer 1

試してみてください。

は、ここに私のコードです。