如何重新加载datatable（jquery）数据？

How to reload the selected tab? Actually I have problem with reloading part. When I add my data I'll successfully saved in datatable but in id field in database it shows proper id, but when I add the detail its not shows id in datatable.

如何重新加载选定的标签？实际上我有重装部分的问题。当我添加我的数据时，我将成功保存在datatable中，但在数据库中的id字段中显示正确的id，但是当我添加详细信息时，它不会在datatable中显示id。

(before refresh the summary tab) here is example it shows something like this in datatable id patient husband age ...........so on... '' xyz abc 23....... so on...

（在刷新摘要选项卡之前）这里是示例，它在datatable id患者丈夫年龄中显示类似这样的东西...........所以......''xyz abc 23 ....... so上...

(after refreshing manually) but when I refresh my page it show successfully..like this in datatable: id patient husband age ...........so on... 13 xyz abc 23 ....... so on...

（手动刷新后）但是当我刷新我的页面时它显示成功..就像在datatable中：id患者丈夫年龄...........等等... 13 xyz abc 23 ..... ..等......

But exactly I want when I add my detail it should automatically refresh the selected tab.

但正是我想要在添加细节时自动刷新所选标签。

My code is below:

我的代码如下：

<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);

    }
    });

I also tired this approach but no success.

我也厌倦了这种方法但没有成功。

I want my datatable to refresh the data

我希望我的数据表刷新数据

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() ]);
    }
});

10 个解决方案

#1

You can use a simple approach...

你可以用一个简单的方法......

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

It will refresh the data by making an ajax request with the same parameters. Very simple.

它将通过使用相同参数发出ajax请求来刷新数据。很简单。

#2

You could use this function:

你可以使用这个功能：

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();
      });
    }

Dont' forget to call it after your delete function has succeded.

不要忘记在删除功能成功后调用它。

Source: http://www.meadow.se/wordpress/?p=536

资料来源：http：//www.meadow.se/wordpress/？p = 536

#3

Use the fnReloadAjax() by the DataTables.net author.

使用DataTables.net作者提供的fnReloadAjax（）。

I'm copying the source code below - in case the original ever moves:

我正在复制下面的源代码 - 以防原始版本移动：

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

#4

Simpler solution:

更简单的解决方案

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

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

#5

If anything works! Do this:

如果有什么作品！做这个：

example:

例：

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

how to reload the table:

如何重新加载表格：

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

initTable is just a method, that initialized the Table with getJSON.

initTable只是一个用getJSON初始化Table的方法。

#6

None of these solutions worked for me, but I did do something similar to Masood's answer. Here it is for posterity. This assumes you have <table id="mytable"></table> in your page somewhere:

这些解决方案都不适合我，但我确实做了类似于Masood的回答。这是为了后代。假设您的页面中有

：

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

The important parts are:

重要的部分是：

1. bDestroy, which wipes out the current table before loading.
2. bDestroy，在加载之前擦除当前表。
3. The hide() call and fnInitComplete, which ensures that the table only appears after everything is loaded. Otherwise it resizes and looks weird while loading.
4. hide（）调用和fnInitComplete，它确保表只在加载所有内容后出现。否则它会在加载时调整大小并且看起来很奇怪。

Just add the function call to $(document).ready() and you should be all set. It will load the table initially, as well as reload later on a button click or whatever.

只需将函数调用添加到$（document）.ready（），您应该全部设置。它最初将加载表，以及稍后按下按钮或其他任何内容时重新加载。

#7

// 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();
    });
}

#8

I'm posting this just in case someone need it..

我发布这个以防万一有人需要它..

Just create a button:

只需创建一个按钮：

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

but don't forget to add this when calling the datatable:

但是在调用数据表时不要忘记添加它：

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

#9

To reload the table data from Ajax data source, use the following function:

要从Ajax数据源重新加载表数据，请使用以下函数：

dataTable.ajax.reload()

Where dataTable is the variable used to create the table.

其中dataTable是用于创建表的变量。

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

See ajax.reload() for more information.

有关更多信息，请参阅ajax.reload（）。

#10

For the newer versions use:

对于较新的版本，请使用：

var datatable = $('#table').dataTable().api();

$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

Taken from: https://*.com/a/27781459/4059810

取自：https：//*.com/a/27781459/4059810