Comment recharger les données DataTables(jquery)?

Vous pouvez utiliser une approche simple...

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

Il va rafraîchir les données en effectuant une requête ajax avec les mêmes paramètres. Très simple.

Vous pouvez utiliser cette fonction:

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

Ne pas oublier de l'appeler après votre fonction de suppression a réussi.

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

Utiliser le fnReloadAjax() par le DataTables.net auteur.

je copie le code source ci - dessous-au cas où l'original bouge:

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

solution plus simple:

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

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

si quelque chose fonctionne! Faire ceci:

exemple:

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

comment recharger la table:

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

initTable est juste une méthode, qui a initialisé la Table avec getJSON.

aucune de ces solutions n'a fonctionné pour moi, mais j'ai fait quelque chose de semblable à la réponse de Masood. Ici, c'est pour la postérité. Cela suppose que vous avez <table id="mytable"></table> dans votre page quelque part:

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

Les pièces importantes sont:

1. bDestroy, qui efface la table courante avant de la charger.
2. hide() et fnInitComplete, ce qui garantit que la table n'apparaît qu'après que tout est chargé. Sinon, il se redimensionne et semble bizarre tandis que chargement.

il suffit d'ajouter l'appel de fonction à $(document).ready() et vous devriez être tous ensemble. Il chargera la table d'abord, ainsi que recharger plus tard sur un clic de bouton ou quoi que ce soit.

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

je poste ceci juste au cas où quelqu'un en aurait besoin..

il suffit de créer un bouton:

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

mais n'oubliez pas d'ajouter ceci lorsque vous appelez le datatable:

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

pour recharger les données de la table à partir de la source de données Ajax, utilisez la fonction suivante:

dataTable.ajax.reload()

Où dataTable est la variable utilisée pour créer la table.

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

Voir ajax.reload() pour plus d'informations.

Pour les versions plus récentes d'utilisation:

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

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

extrait de:https://stackoverflow.com/a/27781459/4059810