如何重新加载数据表(jquery)数据?

Posted

技术标签:

【中文标题】如何重新加载数据表(jquery)数据?【英文标题】:How to reload the datatable(jquery) data? 【发布时间】:2011-07-30 19:22:47 【问题描述】:

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

(在刷新摘要选项卡之前)这是一个示例,它在数据表 id 患者丈夫年龄............'' xyz abc 23...... ..等等...

(手动刷新后)但是当我刷新我的页面时它显示成功..像这样在数据表中:id 患者丈夫年龄............ 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() ]);
    
);

【问题讨论】:

【参考方案1】:

您可以使用简单的方法...

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

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

【讨论】:

为我工作!谢谢。 对我不起作用;它进行后端调用并获取数据,但不会重新创建表本身。 :( 老兄,你是一个重要的救生员!这对我来说非常有效。 +100【参考方案2】:

你可以使用这个功能:

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

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

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

【讨论】:

无需 FN 的绝佳解决方案... fnReloadAjax!【参考方案3】:

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

我正在复制下面的源代码 - 以防原件移动:

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

【讨论】:

fnReloadAjax() 运行良好。我在任何地方都没有找到这个解决方案。它保留所有活动的过滤器和排序。简直完美。 这是一个很好的方法。效果很好,但在我看来 Elior Cohen 的答案更好。结果是一样的,但它不需要任何额外的代码,只需要一个简单的数据表方法调用。去 $('YourDataTableID').dataTable()._fnAjaxUpdate(); 原则上,DataTable v1.10.1 中添加了类似的逻辑ajax.reload()【参考方案4】:

更简单的解决方案:

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

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

【讨论】:

最优雅的解决方案。谢谢。 最优雅的解决方案。谢谢。【参考方案5】:

如果一切正常!这样做:

示例:

<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 初始化 Table。

【讨论】:

这是唯一对我有用的解决方案(有点)。【参考方案6】:

这些解决方案都不适合我,但我确实做了类似于 Masood 的回答。这里是为了后代。这假设您的页面中有&lt;table id="mytable"&gt;&lt;/table&gt;

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

重要的部分是:

    bDestroy,在加载前清除当前表。 hide() 调用和fnInitComplete,确保表格仅在所有内容加载后出现。否则,它会调整大小并在加载时看起来很奇怪。

只需将函数调用添加到$(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();
    );

【讨论】:

你听说过for(var i in json.aaData) 这需要什么? oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();【参考方案8】:

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

只需创建一个按钮:

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

但不要忘记在调用数据表时添加这个:

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

【讨论】:

如果dataTable 已经被初始化,它将不起作用。在这种情况下它会抛出异常。【参考方案9】:

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

dataTable.ajax.reload()

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

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

更多信息请参见ajax.reload()

【讨论】:

【参考方案10】:

对于较新的版本,请使用:

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

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

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

【讨论】:

以上是关于如何重新加载数据表(jquery)数据?的主要内容,如果未能解决你的问题,请参考以下文章

将新数据附加到窗口时如何重新加载 jQuery 插件。没有提供 reload() 方法

表单提交后如何防止页面重新加载 - JQuery

如何在 DJango 中停止页面重新加载 ajax jquery

重新加载数据表jquery时处理指示器不起作用

使用ajax重新加载后jquery数据表格式消失

jQuery DataTable 删除数据后重新加载