web-dev-qa-db-fra.com

Redessiner les données après avoir utilisé ajax pour actualiser le contenu de la table?

J'utilise Datatables et j'ai un bouton sur la page qui rafraîchit 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 lorsque cela est nécessaire. Ajax rafraîchit la division dans laquelle la table est enveloppée. Je sais que je perds mes boutons de pagination et ma capacité de filtrage car la table doit être redessinée, mais je ne sais pas comment l'ajouter au code d'initialisation de la table.

Code de données

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

J'ai essayé ça mais ça n'a pas marché

"fnDrawCallback": function() {
    function( data ) { 
        $("#ajaxresponse").html(data);
    };
},
jqueryajaxdatatables
25
Anagio

Il semble que vous puissiez utiliser les fonctions de l’API pour

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

http://datatables.net/api

METTRE &AGRAVE; 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 compris cela au début, alors ma réponse précédente ne fonctionnera pas pour cela.

Pour que cela fonctionne sans réécrire le code côté serveur:

Ce que vous devez 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
swatkins

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 va d'abord détruire et l'instance datatable associée à ce sélecteur avant de réinitialiser un nouveau.

13
Keith.Abramo

Je ne sais pas pourquoi. Mais

oTable6.fnDraw();

Travaille pour moi. Je le mets à la ligne suivante.

7
jairobg

Utilisez ceci:

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

ou

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

Pour les utilisateurs de DataTables modernes (1.10 et plus), toutes les réponses et exemples de cette page s'appliquent à l'ancienne API, pas à la nouvelle. J'ai eu beaucoup de mal à trouver un exemple plus récent, mais j'ai finalement trouvé ce post sur le 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 que j'ai finalement remarqué la syntaxe de sélecteur $ () entourant immédiatement la chaîne html. Vous devez ajouter un noeud et non une chaîne.

Cet exemple vaut vraiment la peine d'être examiné, mais, dans l'esprit de SO, si vous voulez seulement 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 pourrait noter que, puisque nous n’ajoutons qu’une seule ligne de données, table.row.add (...) devrait également fonctionner et a fonctionné pour moi.

2
Anne Gunn

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 juste 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, la modification est définitive la première fois que vous dessinez la table et fnDraw ne fonctionne pas comme vous le souhaitez.

1
laromicas

Ça marche 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
Imran Rashid

Voici comment je nourris ma table avec les données récupérées par ajax (je ne sais pas si c'est la meilleure pratique qui soit, mais cela semble intuitif 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
Igor L.