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

J'utilise Datatables et j'ai un bouton sur la page qui actualise la table en utilisant AJAX. Pour être clair, la table n'utilise pas une source de données ajax, nous utilisons simplement ajax pour l'actualiser uniquement en cas de besoin. Ajax rafraîchit la div dans laquelle la table est enveloppée. Je sais que je perds mes boutons de pagination et ma capacité de filtrage parce que la table doit être redessinée mais je ne sais pas comment l'ajouter dans le code d'initialisation de la table.

Datatables code

var oTable6;
$(document).ready(function() {
    oTable6 = $('#rankings').dataTable( {
        "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
        ]

    });
});

Le code ajax est le suivant

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

J'ai essayé ceci mais ça n'a pas Marché

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},
25
demandé sur Sorangwala Abbasali 2011-10-19 13:15:58

8 réponses

Il semble que vous puissiez utiliser les fonctions API pour

  • effacer la table (fnClearTable)
  • ajouter de nouvelles données à la table (fnAddData)
  • redessiner la table (fnDraw)

Http://datatables.net/api

Mise à JOUR

Je suppose que vous utilisez la source de données DOM (pour le traitement côté serveur) pour générer votre table. Je n'ai pas vraiment qu'au début, donc ma réponse précédente ne fonctionne pas pour cela.

Pour l'obtenir travaillez sans réécrire votre code côté serveur:

Ce que vous devrez faire est de supprimer totalement l'ancienne table (dans le dom) et de la remplacer par le contenu du résultat ajax, puis de réinitialiser le datatable:

// in your $.post callback:

function (data) {

    // remove the old table
    $("#ajaxresponse").children().remove();

    // replace with the new table
    $("#ajaxresponse").html(data);

    // reinitialize the datatable
    $('#rankings').dataTable( {
    "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
        ]

    } 
    );
}
26
répondu swatkins 2011-10-25 18:13:38

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.

13
répondu Keith.Abramo 2011-10-25 18:30:31

Je ne sais pas pourquoi. Mais

oTable6.fnDraw();

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

7
répondu jairobg 2013-03-04 15:47:20

Utilisez ceci:

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

Ou

var table = $(selector).DataTables();
table.draw(false);
4
répondu Avram Cosmin 2014-12-20 02:55:19

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.

2
répondu Anne Gunn 2016-11-11 18:47:41

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();
1
répondu Imran Rashid 2013-03-14 13:37:00

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.

1
répondu laromicas 2013-08-05 20:26:26

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] );
    }                                
}
0
répondu Igor L. 2014-03-17 14:59:31