Comment recharger/rafraîchir jQuery dataTable ?

Question

J'essaie d'implémenter une fonctionnalité par laquelle le fait de cliquer sur un bouton à l'écran provoquera l'activation de mon ordinateur. jQuery dataTable pour rafraîchir (car la source de données côté serveur peut avoir changé depuis la création de la dataTable).

Voici ce que j'ai :

$(document).ready(function() {
    $("#my-button").click(function() {
        $("#my-datatable").dataTable().fnReloadAjax();
    });
});

Mais quand je lance ça, ça ne fait rien. Quelle est la bonne façon de rafraîchir la table de données lorsque le bouton est cliqué ? Merci d'avance !

Answer 1

Je vous recommande d'utiliser le code suivant.

table.ajax.reload(null, false); 

La raison en est que la pagination de l'utilisateur ne sera pas réinitialisée lors du rechargement.
Exemple :

<button id='refresh'> Refresh </button>

<script>
    $(document).ready(function() {

        table = $("#my-datatable").DataTable();
        $("#refresh").on("click", function () { 
         table.ajax.reload(null, false); 
        });

   });
</script>

Vous trouverez des détails à ce sujet à l'adresse suivante [Ici](https://datatables.net/reference/api/ajax.reload())

Answer 2

Cette réponse simple a fonctionné pour moi

                  $('#my-datatable').DataTable().ajax.reload();

réf. https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

Answer 3

var ref = $('#example').DataTable();
ref.ajax.reload();

Si vous voulez ajouter un bouton de rechargement/rafraîchissement a DataTables 1.10 puis utiliser drawCallback .

Voir l'exemple ci-dessous (j'utilise DataTables avec css bootstrap)

var ref= $('#hldy_tbl').DataTable({
        "responsive": true,
        "processing":true,
        "serverSide":true,
        "ajax":{
            "url":"get_hotels.php",
            "type":"POST"
        },
        "drawCallback": function( settings ) {
            $('<li><a onclick="refresh_tab()" class="fa fa-refresh"></a></li>').prependTo('div.dataTables_paginate ul.pagination');
        }
    });

function refresh_tab(){
    ref.ajax.reload();
}

Answer 4

Utilisez ce code ,lorsque vous voulez rafraîchir votre table de données :

 $("#my-button").click(function() {
    $('#my-datatable').DataTable().clear().draw();
 });

Answer 5

Essayez d'abord de détruire la table de données puis de la configurer à nouveau, par exemple

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});