ajax請求成功重繪數據表

Question

我試圖重新繪製一個數據表後，點擊批准按鈕，一旦ajax請求成功。

一切工作在點擊功能（它保存到數據庫，它動畫，它向上滑動），但 表不重繪。

有沒有任何機構有任何想法，爲什麼它不工作？

$('a.approve').click(function(e) { 
    e.preventDefault(); 
    var parent = $(this).closest("tr"); 
    $.ajax({ 
     type: 'get', 
     url: 'index.php', 
     data: 'ajax=1&approve='+ parent.attr('id').replace('record-','')+'&employee='+ parent.attr('title')+'&acyear=' + parent.attr('lang'), 
     beforeSend: function() { 
     parent.animate({'backgroundColor':'#fb6c6c'},300); 
     }, 
     success: function() { 
     parent.slideUp(300,function() { 
      parent.remove(); 
     var $aTable= $("#table_a").dataTable({ bRetrieve : true }); 
     var $bTable= $("#table_b").dataTable({ bRetrieve : true }); 
     $aTable.fnDraw(); 
     $bTable.fnDraw(); 
     }); 

     } 
    }); 
    }); 

Answer 1

oTable.fnReloadAjax();成功結果重新綁定表

$(document).ready(function() { 

$.fn.dataTableExt.oApi.fnReloadAjax = function (oSettings, sNewSource, fnCallback, bStandingRedraw) { 
    if (typeof sNewSource != 'undefined' && sNewSource != null) { 
     oSettings.sAjaxSource = sNewSource; 
    } 
    this.oApi._fnProcessingDisplay(oSettings, true); 
    var that = this; 
    var iStart = oSettings._iDisplayStart; 
    var aData = []; 

    this.oApi._fnServerParams(oSettings, aData); 

    oSettings.fnServerData(oSettings.sAjaxSource, aData, function (json) { 
     /* Clear the old information from the table */ 
     that.oApi._fnClearTable(oSettings); 

     /* Got the data - add it to the table */ 
     var aData = (oSettings.sAjaxDataProp !== "") ? 
      that.oApi._fnGetObjectDataFn(oSettings.sAjaxDataProp)(json) : json; 

     for (var i = 0; i < aData.length; i++) { 
      that.oApi._fnAddData(oSettings, aData[i]); 
     } 

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     that.fnDraw(); 

     if (typeof bStandingRedraw != 'undefined' && bStandingRedraw === true) { 
      oSettings._iDisplayStart = iStart; 
      that.fnDraw(false); 
     } 

     that.oApi._fnProcessingDisplay(oSettings, false); 

     /* Callback user function - for event handlers etc */ 
     if (typeof fnCallback == 'function' && fnCallback != null) { 
      fnCallback(oSettings); 
     } 
    }, oSettings); 
} 
}); 

Answer 2

後，我沒有看到足夠的代碼，以瞭解您的確切需要。

我想你的parent var表示你的一個dataTables中的一行，並且你想從dataTable中刪除它。

dataTable保留其數據的內部緩存，並且調用parent.remove()不會更新此緩存。

如果你想從數據表刪除行，你應該使用API​​函數fnDeleteRow：

// remove your "parent.remove()" line 
$aTable.fnDeleteRow(parent[0]) 

Answer 3

爲了從數據庫中獲取新表中的數據，你index.php需要回表值一個JSON：

{ 
    "sEcho": 1, 
    "iTotalRecords": "2", 
    "iTotalDisplayRecords": "2", 
    "aaData": [ 
    [ 
     "Gecko", 
     "Firefox 1.0", 
     "Win 98+/OSX.2+", 
     "1.7", 
     "A" 
    ], 
    [ 
     "Gecko", 
     "Netscape Navigator 9", 
     "Win 98+/OSX.2+", 
     "1.8", 
     "A" 
    ]  ] 
} 

和成功部分：

success: function(json) { 
     parent.slideUp(300, function() { 
      parent.remove(); 

      var obj = JSON.parse(json);//get new data 
      oTable.fnClearTable();//clear table 
      for (x in obj.aaData) 
       oTable.fnAddData(obj[x]); //populate table 

      //redo another ajax if you have several table. 
     }); 

如果只更改了1行，則刪除該行，以JSON形式從服務器返回該行，並在表中重新插入該行。

Answer 4

晚會有點遲，但我剛剛經歷了這個，所以我想我會在這裏留下答案。

默認情況下，JQuery不會阻止緩存ajax響應。 Chrome和Firefox似乎不會緩存這些調用，因此它們更新正常。另一方面，IE瀏覽器總是緩存ajax響應，即使刷新頁面也不會刷新它們。解決的辦法是始終有一個緩存：「假」，在你的Ajax調用設置，就像這樣：

$.ajax({ 
    type: 'get', 
    cache: false, 
    url: 'index.php', 
    data: 'ajax=1', 
    success: function() { 
     ... 
    } 
); 

數據表拋出一個額外的扭曲成這樣：（因爲V 1.7），默認情況下它們關閉緩存爲你。所以，如果你只是設置AJAX網址，一個DataTable應該可以更新：無論其

$("#myTable").dataTable({ 
    "bProcessing": true, 
    "sAjaxSource": "getAssayBatches.json", // URL that retrieves the data 
    // datatable leaves caching off by default. Table refreshes ok! 
}); 

，如果你需要做一些額外的處理，並覆蓋「fnServerData」功能，你就失去了默認的緩存設置，這意味着緩存重新打開：

$("#myTable").dataTable({ 
    "bProcessing": true, 
    "sAjaxSource": "getAssayBatches.json", // URL that retrieves the data 

    // the following parameter turns caching back on, meaning stale data in IE! 
    "fnServerData": function (sSource, aoData, fnCallback) { 
     $.getJSON(sSource, aoData, function (json) { 
      var data = {"aaData": json}; 
      fnCallback(data); 
     }); 
    } 
}); 

所以你需要把緩存：假這裏也保證了表得到更新：

$("#myTable").dataTable({ 
    "bProcessing": true, 
    "sAjaxSource": "getAssayBatches.json", // URL that retrieves the data 

    // same ajax call as above, but this time with cache: false 
    // to ensure the table gets updated 
    "fnServerData": function (sSource, aoData, fnCallback) { 
     $.ajax({ 
      type: "GET", 
      cache: false, 
      url: sSource, 
      data: aoData, 
      success: function (json) { 
       var data = {"aaData": json}; 
       fnCallback(data); 
      } 
     }); 
    } 
}); 

希望這可以幫助別人。