如何重新加载数据表（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