Redessinez datatables après avoir utilisé ajax pour actualiser le contenu de la table?

Essayez de détruire le datatable avec bDestroy: true comme ceci:

$("#ajaxchange").click(function(){
    var campaign_id = $("#campaigns_id").val();
    var fromDate = $("#from").val();
    var toDate = $("#to").val();

    var url = 'http://domain.com/account/campaign/ajaxrefreshgrid?format=html';
    $.post(url, { campaignId: campaign_id, fromdate: fromDate, todate: toDate},
            function( data ) { 

                $("#ajaxresponse").html(data);

                oTable6 = $('#rankings').dataTable( {"bDestroy":true,
                    "sDom":'t<"bottom"filp><"clear">',
                    "bAutoWidth": false,
                    "sPaginationType": "full_numbers",
"aoColumns": [ 
        { "bSortable": false, "sWidth": "10px" },
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null,
        null
        ]

} 
);
            });

});

BDestroy: true détruira d'abord l'instance datatable associée à ce sélecteur avant d'en réinitialiser une nouvelle.

Je ne sais pas pourquoi. Mais

oTable6.fnDraw();

Fonctionne pour moi. Je l'ai mis dans la ligne suivante.

Utilisez ceci:

var table = $(selector).dataTables();
table.api().draw(false);

Ou

var table = $(selector).DataTables();
table.draw(false);

Pour les utilisateurs de DataTables modernes (1.10 et plus), toutes les réponses et les exemples sur cette page sont pour l'ancienne api, pas la nouvelle. J'ai eu du mal à trouver un exemple plus récent, mais j'ai finalement trouvé ce post du forum DT (TL; DR pour la plupart des gens) qui m'a conduit à cet exemple concis .

L'exemple de code a fonctionné pour moi après avoir finalement remarqué la syntaxe du sélecteur $() entourant immédiatement la chaîne html. Vous devez ajouter un nœud pas une chaîne.

Cet exemple cela vaut vraiment la peine d'être regardé, mais, dans L'esprit de SO, si vous voulez juste voir un extrait de code qui fonctionne:

var table = $('#example').DataTable();
  table.rows.add( $(
          '<tr>'+
          '  <td>Tiger Nixon</td>'+
          '  <td>System Architect</td>'+
          '  <td>Edinburgh</td>'+
          '  <td>61</td>'+
          '  <td>2011/04/25</td>'+
          '  <td>$3,120</td>'+
          '</tr>'
  ) ).draw();

Le lecteur attentif peut noter que, puisque nous ajoutons une seule ligne de données, Cette table.rangée.ajouter(...) devrait fonctionner aussi bien et a fait pour moi.

Cela fonctionne pour moi

var dataTable = $('#HelpdeskOverview').dataTable();

var oSettings = dataTable.fnSettings();
dataTable.fnClearTable(this);
for (var i=0; i<json.aaData.length; i++)
{
   dataTable.oApi._fnAddData(oSettings, json.aaData[i]);
}
oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
dataTable.fnDraw();

Dans l'initialisation, utilisez:

"fnServerData": function ( sSource, aoData, fnCallback ) {
                    //* Add some extra data to the sender *
                    newData = aoData;
                    newData.push({ "name": "key", "value": $('#value').val() });

                    $.getJSON( sSource, newData, function (json) {
                        //* Do whatever additional processing you want on the callback, then tell DataTables *
                        fnCallback(json);
                    } );
                },

Et puis il suffit d'utiliser:

$("#table_id").dataTable().fnDraw();

La chose importante dans le fnServerData est:

    newData = aoData;
    newData.push({ "name": "key", "value": $('#value').val() });

Si vous appuyez directement sur aoData, le changement est permanent la première fois que vous dessinez la table et fnDraw ne fonctionne pas comme vous le souhaitez.

Voici comment je nourris ma table avec des données récupérées par ajax (Je ne sais pas si c'est la meilleure pratique difficile, mais elle est intuitive et fonctionne bien):

/* initialise table */
oTable1 = $( '.tables table' ).dataTable
( {
    'sPaginationType': 'full_numbers',
    'bLengthChange': false,
    'aaData': [],
    'aoColumns': [{"sTitle": "Tables"}],
    'bAutoWidth': true
} );


 /*retrieve data*/
function getArr( conf_csv_path )
{
    $.ajax
    ({
        url  : 'my_url'
        success  : function( obj ) 
        {
            update_table( obj );
        }
    });
}


/* build table data */
function update_table( arr )
{        
    oTable1.fnClearTable();
    for ( input in arr )
    {
        oTable1.fnAddData( [ arr[input] );
    }                                
}