J'utilise DataTable. J'envoie des données à onclick datatable dans le fichier json. Le problème est que lorsque j'utilise $('.datatable-ajax-source table').dataTable().fnDestroy();, je perds le filtre, la ligne et la pagination. Je reçois juste le tableau ci-dessous:

enter image description here

C'est ma fonction javascript:

$('#ButtonPostJson').on('click', function() {           
    var forsearch = $("#searchItem").val();
    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'path.json',
        dataType: "json",
        success: function(data) {
            $.each(data, function(i, data) {
                var body = "<tr>";
                body += "<td>" + data.name + "</td>";
                body += "</tr>";
            $('.datatable-ajax-source table').append(body);
        });

        /*DataTables instantiation.*/
        $('.datatable-ajax-source table').dataTable().fnDestroy();
    },
    error: function() {
        alert('Fail!');
    }
});
});

Et quand je remplace $('.datatable-ajax-source table').dataTable().fnDestroy(); avec $('.datatable-ajax-source table').dataTable(); j'obtiens ce tableau qui je veux

enter image description here

Mais lorsque je veux rechercher un nouveau terme, les anciennes données sont toujours là, je dois actualiser la page manuellement pour effectuer une nouvelle recherche. Comment puis-je actualiser ou mettre à jour ma table de données?

0
MedKostali 9 août 2016 à 21:54

3 réponses

Meilleure réponse

Ce lien Actualisation des données dans jQuery DataTables est très utile, je m'en inspire pour résoudre mon problème.

0
MedKostali 12 août 2016 à 15:59

Vous manquez les meilleures parties de dataTables l'utilisant de cette manière. Ne construisez pas votre HTML manuellement .... utilisez le .rows.add () (et les fonctions associées) pour redessiner votre table selon vos besoins.

Essaye ça:

https://jsfiddle.net/xgpgLydb/

var tbl = $('#example').DataTable({
    columns: [{
    data: 'Prop1',
    title: 'Example Prop'
  },{
    data: 'Prop2',
    title: 'Example Prop 2'
  }]
});

var req = $.ajax({
    url: '/echo/json/',
    method: 'post',
    data: {
        json: JSON.stringify([{
            Prop1: 'Foo',
          Prop2: 'Bar'
        },{
            Prop1: 'Fred',
          Prop2: 'Flinstone'
        }]),
        delay: 1
    }
});

req.done(function(response) {
    tbl.rows().remove().draw();
    tbl.rows.add(response).draw();
});
0
BLSully 9 août 2016 à 20:18

J'utilise fnStandingRedraw pour rafraîchir les données côté serveur et cela fonctionne comme un charme (malheureusement, c'est obsolète). Vous pouvez utiliser https://datatables.net/plug-ins/api/fnStandingRedraw

var ajaxSourceDataTable;

//define datatable
ajaxSourceDataTable = $('.datatable-ajax-source table').dataTable() 

//use this code to redraw/refresh datatable
ajaxSourceDataTable.fnStandingRedraw();
0
Jitesh Sojitra 9 août 2016 à 18:59