web-dev-qa-db-fra.com

recharger datatable après le succès ajax

J'utilise JQuery DataTable. J'envoie des données à datatable onclick dans le fichier json à ajax. Le premier clic, tout est bon, mais le clic suivant ne me donne que les bonnes données et la mauvaise valeur de dataTables_info. Il affiche toujours la première valeur de dataTables_info. premier résultat . Ceci est le premier affichage de données dans datatable:

The first Click

TOUT le clic suivant, je n’obtiens que les bonnes données: Pour cet exemple, c’est un résultat qui apparaît dans l’image ci-dessous, mais tout le reste (info, show, pagination) appartient à la première recherche apparaissant dans la première image: enter image description here

Dans le deuxième exemple Lorsque je clique sur une page de pagination, je récupère le contenu du résultat de la première page! C’est ma fonction ONclick:

    $ ( '#ButtonPostJson' ).on('click',function() {

             $("tbody").empty();
             var forsearch = $("#searchItem").val();

    $.ajax({
        processing: true,
        serverSide: true,
        type: 'post',
        url: 'searchData.json',
        dataType: "json",
        data: mysearch,
       /* bRetrieve : true,*/

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

        error: function() {
            alert('Processus Echoué!');
        },
        afterSend: function(){
    $('.datatable-ajax-source table').dataTable().reload();
 /* $('.datatable-ajax-source table').dataTable({bRetrieve : true}).fnDestroy();    
    $(this).parents().remove(); 
$('.datatable-ajax-source table').dataTable().clear();*/
    }
    });
    });

J'essaie tout et je ne sais pas ce qui me manque . J'utilise cette requête pour datatable:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

Merci.

javascriptjqueryajaxdatatabledatatables
4
MedKostali

Ce lien Actualisation des données dans jQuery DataTables

est très utile, je m'en inspire pour résoudre mon problème.

1
MedKostali

Sur un bouton, vous n'avez pas besoin de vider le corps de votre table et de lancer à nouveau le datatable avec l'ajax.

il vous suffit de rappeler votre ajax car vous avez déjà lancé la fonction de préparation de document 

juste utiliser

$("#Table_id").ajax.reload();

vérifiez le lien ci-dessous, vous aurez une meilleure idée.

https://datatables.net/reference/api/ajax.reload ()

Faites-moi savoir si cela ne vous aide pas

2
Punit Gajjar

utiliser ci-dessous code..il fonctionne parfaitement, il garde votre pagination sans perdre la page en cours

$ ("# exemple_table"). DataTable (). ajax.reload (null, false);

0
salithlal

J'ai créé cette fonction simple:

function refreshTable() {
  $('.dataTable').each(function() {
      dt = $(this).dataTable();
      dt.fnDraw();
  })
}
0
Sibin John Mattappallil

J'ai eu le même problème. J'ai trouvé une fonction que j'ai écrite sur un projet qui traite de cela. Voici un tableau simple de 2 colonnes que j'ai créé.

<table id="memberships" class="table table-striped table-bordered table-hover"  width="100%">
        <thead>
            <tr>
                <th>Member Name</th>
                <th>Location</th>
            </tr>
        </thead>
        <tfoot>
          <tr>
            <th>Member Name</th>
            <th>Location</th>
          </tr>
        </tfoot>
      </table>

Ceci est mon script pour le peupler:

function drawTable(){
var table = $('#memberships').DataTable();

table.destroy();

value = $("#memberName").val();
console.log("member name-->>" + value);
$('#memberships').DataTable({
responsive:true,
pageLength: 50,
ajax:{
    "url": `//BACKEND API CALL`,
    "type":"get",
    "dataSrc": 'members'//my data is in an array called members
},
columns: [
  {"data": "name_display" },
  {"targets": 0,
    "data": "membershipID",
    "render": function ( data, type, full, meta ) {
      return '<button type="button" class="btn btn-info btn-block" 
      onclick="editMember(' + data + ')">Edit Member</button><button 
      type="button" class="btn btn-danger btn-block" 
      onclick="deleteMember(' + data + ')">Delete</button>';
    }
  }
 ]
});
$.fn.dataTable.ext.errMode = 'none';
}

Vous pouvez ignorer ma fonction de rendu de colonne. J'avais besoin de 2 boutons en fonction des données retournées. La clé était la table.destroy dans la fonction. J'ai créé la table dans une variable appelée table. Je le détruis directement dans cette initialisation car cela me permettait d'utiliser cette même fonction encore et encore. La première fois, il détruit une table vide. Après chaque appel, les données sont détruites et repeuplées à partir de l'appel ajax. 

J'espère que cela t'aides.

0
sixstring

$("#Table_id").ajax.reload(); n'a pas fonctionné. 

J'ai mis en place - 

var mytbl = $("#Table_id").datatable();
mytbl.ajax.reload;
0
Adarsh Madrecha