如何重新加載數據表（jquery）數據？

Question

如何重新加載選定的選項卡？其實我有重裝部分的問題。當我添加我的數據時，我將成功保存在數據表中，但在數據庫的ID字段中顯示正確的ID，但是當我添加詳細信息時，它不顯示數據表中的ID。

（之前刷新摘要選項卡）這裏是示例它顯示了這樣的數據表ID身份證丈夫年齡...........等......「'xyz abc 23 .... ...等等...

（手動刷新後），但當我刷新我的網頁它顯示成功..像這樣在datatable：id病人丈夫年齡........... so ... 13 xyz abc 23 .......等等...

但正是我想當我添加我的細節時，它應該會自動刷新選定的選項卡。

我的代碼如下：

<button type="button" a href="javascript:void(0);" onclick="fnClickAddRow();">Add Summary</button> 

function fnClickAddRow(event) { 

$('#table_scroll').dataTable().fnAddData([ 

$('#patientt').val(),$('#husband').val(),$('#age').val(),$('#opu_no').val(),$('#date').val(),$('#proc').val(),$('#no_of_eggs').val(),$('#fert').val(),$('#et_date').val(),$('#et_day').val(),$('#et').val(),$('#fz').val(),$('#bioch_preg').val(),$('#clin_preg').val(),$('#fh').val(),$('#comment').val() 

]); 


var datastring = $(Form_summary).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "summaryajax.php", 
    data: datastring, 
    success: function(response){ 

alert(response); 

    } 
    }); 

我也厭倦了這種做法，但沒有成功。

我希望我的數據表刷新數據

function fnClickAddRow(event) { 

var datastring = $(Form_summary).serialize(); 

$.ajax({ 
    type: "POST", 
    url: "summaryajax.php", 
    data: datastring, 
    success: function(response){ 
     $('#table_scroll').dataTable().fnAddData( 
      [resposne, $('#patientt').val(), $('#husband').val(),$('#age').val(), 
      $('#opu_no').val(), $('#date').val(),$('#proc').val(), $('#no_of_eggs').val(), 
      $('#fert').val(),$('#et_date').val(), $('#et_day').val(), $('#et').val(), 
      $('#fz').val(), $('#bioch_preg').val(), $('#clin_preg').val(), $('#fh').val(), 
      $('#comment').val() ]); 
    } 
}); 

Answer 1

您可以使用此功能：

function RefreshTable(tableId, urlData) 
    { 
     //Retrieve the new data with $.getJSON. You could use it ajax too 
     $.getJSON(urlData, null, function(json) 
     { 
     table = $(tableId).dataTable(); 
     oSettings = table.fnSettings(); 

     table.fnClearTable(this); 

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

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     table.fnDraw(); 
     }); 
    } 

不要」別忘了把它您刪除功能已succeded後。

來源：http://www.meadow.se/wordpress/?p=536

Answer 2

// Get the url from the Settings of the table: oSettings.sAjaxSource 

function refreshTable(oTable) { 
    table = oTable.dataTable(); 
    oSettings = table.fnSettings(); 

    //Retrieve the new data with $.getJSON. You could use it ajax too 
    $.getJSON(oSettings.sAjaxSource, null, function(json) { 
     table.fnClearTable(this); 

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

     oSettings.aiDisplay = oSettings.aiDisplayMaster.slice(); 
     table.fnDraw(); 
    }); 
} 

Answer 3

使用the fnReloadAjax()由DataTables.net作者。

我複製下列源代碼 - 的情況下，原有的不斷移動：

$.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); 
} 

/* Example call to load a new file */ 
oTable.fnReloadAjax('media/examples_support/json_source2.txt'); 

/* Example call to reload from original file */ 
oTable.fnReloadAjax(); 

Answer 4

如果有什麼作品！這樣做：

例如：

<div id="tabledisplay"><table class="display" id="table"></table><table </div> 

如何重新加載表：

$('#tabledisplay').empty(); 
$('#tabledisplay').append("<table class=\"display\" id=\"table\"></table>"); 
initTable("tablename"); 

initTable只是一種方法，與初始化的getJSON表。

Answer 5

您可以使用一個簡單的方法...

$('YourDataTableID').dataTable()._fnAjaxUpdate(); 

它將通過與相同參數的Ajax請求刷新數據。很簡單。

Answer 6

我發佈這只是爲了防萬一有人需要它..

只需創建一個按鈕：

<button type="button" href="javascript:void(0);" onclick="mytable.fnDraw();">Refresh</button> 

但不要忘記調用數據表時要補充一點：

mytable = $("#mytable").dataTable(); 

Answer 7

簡單的解決辦法：

var dt = $('#table_scroll').dataTable(); 

$.getJSON(url, null, function (json) { 
    dt.fnClearTable(); 
    dt.fnAddData(json.aaData); 
    dt.fnDraw(); 
}); 

Answer 8

無這些解決方案爲我工作，但我做到了類似於馬蘇德的回答。這是後代。這是假設你在你的頁面的某個地方有<table id="mytable"></table>：

function generate_support_user_table() { 
     $('#mytable').hide(); 
     $('#mytable').dataTable({ 
      ... 
      "bDestroy": true, 
      "fnInitComplete": function() { $('#support_user_table').show(); }, 
      ... 
     }); 
} 

最重要的部分是：

1. bDestroy，其中裝貨前抹了當前表。
2. hide()調用和fnInitComplete，這確保表僅在加載所有內容後才顯示。否則，它調整大小，並加載時看起來很奇怪。

只需將函數調用添加到$(document).ready()，您應該全部設置。它會最初加載表格，以及稍後通過單擊按鈕或其他方式重新加載。

Answer 9

要重新加載從數據的Ajax源表數據，使用以下函數：

dataTable.ajax.reload() 

哪裏dataTable是用於創建表的變量。

var dataTable = $('#your_table_id').DataTable({ 
    ajax: "URL" 
}); 

查看ajax.reload()瞭解更多信息。

Answer 10

對於較新的版本使用：https://stackoverflow.com/a/27781459/4059810