Comment recharger / actualiser jQuery dataTable?

J'essaie d'implémenter une fonctionnalité dans laquelle le fait de cliquer sur un bouton à l'écran provoquera l' actualisation de ma table de données jQuery (car la source de données côté serveur peut avoir changé depuis la création de la table de données).

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 d'actualiser le dataTable lorsque vous cliquez sur le bouton? Merci d'avance!

Vous pouvez essayer ce qui suit:

function InitOverviewDataTable() {
    oOverviewTable = $('#HelpdeskOverview').dataTable({
        "bPaginate": true,
        "bJQueryUI": true, // ThemeRoller-stöd
        "bLengthChange": false,
        "bFilter": false,
        "bSort": false,
        "bInfo": true,
        "bAutoWidth": true,
        "bProcessing": true,
        "iDisplayLength": 10,
        "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
    });
}

function RefreshTable(tableId, urlData) {
    $.getJSON(urlData, null, function(json) {
        table = $(tableId).dataTable();
        oSettings = table.fnSettings();

        table.fnClearTable(this);

        for (var i = 0; i < json.aaData.length; i++) {
            table.oApi._fnAddData(oSettings, json.aaData[i]);
        }

        oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
        table.fnDraw();
    });
}
// Edited by Prasad
function AutoReload() {
    RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

    setTimeout(function() {
        AutoReload();
    }, 30000);
}

$(document).ready(function() {
    InitOverviewDataTable();
    setTimeout(function() {
        AutoReload();
    }, 30000);
});

http://www.meadow.se/wordpress/?p=536

Avec la version 1.10.0 de DataTables, il est intégré et simple:

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

ou juste

$('#example').DataTable().ajax.reload();

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

Vous pouvez utiliser une API étendue de DataTable pour le recharger en ajax.reload()

Si vous déclarez votre datatable comme DataTable()(nouvelle version), vous avez besoin de:

var oTable = $('#filtertable_data').DataTable( );
// to reload
oTable.ajax.reload();

Si vous déclarez votre datatable comme dataTable()(ancienne version), vous avez besoin de:

var oTable = $('#filtertable_data').dataTable( );
// to reload
oTable.api().ajax.reload();

Détruisez d'abord le datatable, puis dessinez le datatable.

$('#table1').DataTable().destroy();
$('#table1').find('tbody').append("<tr><td><value1></td><td><value1></td></tr>");
$('#table1').DataTable().draw();

J'ai eu le même problème, voici comment je l'ai résolu:

obtenir d'abord les données avec la méthode de votre choix, j'utilise ajax après avoir soumis les résultats qui modifieront le tableau. Puis effacez et ajoutez de nouvelles données:

var refreshedDataFromTheServer = getDataFromServer();

var myTable = $('#tableId').DataTable();
myTable.clear().rows.add(refreshedDataFromTheServer).draw();

voici la source: https://datatables.net/reference/api/clear ()

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

Si vous souhaitez ajouter un bouton de rechargement / rafraîchissement à DataTables 1.10, utilisez drawCallback .

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

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

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

je recommanderais 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>

des détails à ce sujet peuvent être trouvés ici

C'est comme ça que je le fais ... Peut-être pas la meilleure façon, mais c'est certainement plus simple (IMHO) et ne nécessite aucun plug-in supplémentaire.

HTML

<div id="my-datatable"></div>

jQuery

function LoadData() {
    var myDataTable = $("#my-datatable").html("<table><thead></thead><tbody></tbody></table>");
    $("table",myDataTable).dataTable({...});
}
$(document).ready(function() {
    $("#my-button").click(LoadData);
    LoadData();
});

Remarque: Dans mon fonctionnement avec jQuery dataTable, parfois si vous ne l'avez pas, <thead></thead><tbody></tbody>cela ne fonctionne pas. Mais vous pourrez peut-être vous en passer. Je n'ai pas exactement compris ce qui le rend nécessaire et ce qui ne l'est pas.

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

Si vous utilisez l'attribut url, faites simplement

table.ajax.reload()

Espère que ça aide quelqu'un

Utilisez ce code, lorsque vous souhaitez actualiser votre datatable:

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

eh bien, vous n'avez pas montré comment / où vous chargez les scripts, mais pour utiliser les fonctions de l'API du plug-in, vous devez l'inclure dans votre page après avoir chargé la bibliothèque DataTables mais avant d'initialiser le DataTable.

comme ça

<script type="text/javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" src="dataTables.fnReloadAjax.js"></script>

DataTables d'Allan Jardine est un plugin jQuery très puissant et astucieux pour afficher des données tabulaires. Il possède de nombreuses fonctionnalités et peut faire la plupart de ce que vous pourriez souhaiter. Une chose qui est curieusement difficile cependant, est de savoir comment actualiser le contenu de manière simple, donc pour ma propre référence, et peut-être pour le bénéfice des autres également, voici un exemple complet d'une manière de procéder:

HTML

<table id="HelpdeskOverview">
  <thead>
    <tr>
      <th>Ärende</th>
      <th>Rapporterad</th>
      <th>Syst/Utr/Appl</th>
      <th>Prio</th>
      <th>Rubrik</th>
      <th>Status</th>
      <th>Ägare</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

Javascript

function InitOverviewDataTable()
{
  oOverviewTable =$('#HelpdeskOverview').dataTable(
  {
    "bPaginate": true,
    "bJQueryUI": true,  // ThemeRoller-stöd
    "bLengthChange": false,
    "bFilter": false,
    "bSort": false,
    "bInfo": true,
    "bAutoWidth": true,
    "bProcessing": true,
    "iDisplayLength": 10,
    "sAjaxSource": '/Helpdesk/ActiveCases/noacceptancetest'
  });
}

function RefreshTable(tableId, urlData)
{
  $.getJSON(urlData, null, function( json )
  {
    table = $(tableId).dataTable();
    oSettings = table.fnSettings();

    table.fnClearTable(this);

    for (var i=0; i<json.aaData.length; i++)
    {
      table.oApi._fnAddData(oSettings, json.aaData[i]);
    }

    oSettings.aiDisplay = oSettings.aiDisplayMaster.slice();
    table.fnDraw();
  });
}

function AutoReload()
{
  RefreshTable('#HelpdeskOverview', '/Helpdesk/ActiveCases/noacceptancetest');

  setTimeout(function(){AutoReload();}, 30000);
}

$(document).ready(function () {
  InitOverviewDataTable();
  setTimeout(function(){AutoReload();}, 30000);
});

La source

var maTable = $ ('# tblIdName'). DataTable (); myTable.clear (). rows.add (myTable.data) .draw ();

Cela a fonctionné pour moi sans utiliser ajax.

        if(data.length==0){
            alert("empty");
              $('#MembershipTable > tbody').empty();
            // $('#MembershipTable').dataTable().fnDestroy();
                    $('#MembershipTable_info').empty(); 
                    $("#MembershipTable_length").empty();
                    $("#MembershipTable_paginate").empty();

             html="<tr><td colspan='20'><b>No data available in Table</b> </td></tr>";
           $("#MembershipTable").append(html);
        }

        else{
             $('#MembershipTable').dataTable().fnDestroy();
            $('#MembershipTable > tbody').empty();

         for(var i=0; i<data.length; i++){
            //

.......}

Selon l' aide de DataTable , je pourrais faire pour ma table.

Je veux avoir plusieurs bases de données dans mon DataTable.

Par exemple: data_1.json> 2500 enregistrements - data_2.json> 300 enregistrements - data_3.json> 10265 enregistrements

var table;
var isTableCreated= false;

if (isTableCreated==true) {
    table.destroy();
    $('#Table').empty(); // empty in case the columns change
}
else
    i++;

table = $('#Table').DataTable({
        "processing": true,
        "serverSide": true,
        "ordering": false,
        "searching": false,
        "ajax": {
            "url": 'url',
            "type": "POST",
            "draw": 1,
            "data": function (data) {
                data.pageNumber = (data.start / data.length);
            },
            "dataFilter": function (data) {
                return JSON.stringify(data);
            },
            "dataSrc": function (data) {
                if (data.length > 0) {
                    data.recordsTotal = data[0].result_count;
                    data.recordsFiltered = data[0].result_count;
                    return data;
                }
                else
                    return "";
            },

            "error": function (xhr, error, thrown) {
                alert(thrown.message)
            }
        },
        columns: [
           { data: 'column_1' },
           { data: 'column_2' },
           { data: 'column_3' },
           { data: 'column_4' },
           { data: 'column_5' }
        ]
    });

si vous utilisez datatable v1.10.12, appelez simplement la .draw()méthode et passez vos types de tirage requis full-reset, c'est -à- dire que pagevous redessinez votre dt avec de nouvelles données

let dt = $("#my-datatable").datatable()

// faire une action

dt.draw('full-reset')

pour plus, consultez les documents datables

J'avais fait quelque chose qui se rapporte à cela ... Voici un exemple de javascript avec ce dont vous avez besoin. Il y a une démo à ce sujet ici: http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

//global the manage member table 
var manageMemberTable;

function updateMember(id = null) {
    if(id) {
        // click on update button
        $("#updatebutton").unbind('click').bind('click', function() {
            $.ajax({
                url: 'webdesign_action/update.php',
                type: 'post',
                data: {member_id : id},
                dataType: 'json',
                success:function(response) {
                    if(response.success == true) {                      
                        $(".removeMessages").html('<div class="alert alert-success alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-ok-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table

                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');

                    } else {
                        $(".removeMessages").html('<div class="alert alert-warning alert-dismissible" role="alert">'+
                              '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>'+
                              '<strong> <span class="glyphicon glyphicon-exclamation-sign"></span> </strong>'+response.messages+
                            '</div>');

                        // refresh the table                        
                        manageMemberTable.ajax.reload();

                        // close the modal
                        $("#updateModal").modal('hide');
                    }
                }
            });
        }); // click remove btn
    } else {
        alert('Error: Refresh the page again');
    }
}

vous devez écrire cette ligne de code après avoir effectué l'opération de mise à jour.

$('#example').DataTable().ajax.reload();

Pour mon cas (DataTables 1.10.7) le code suivant fonctionne pour moi;

let table = $(tableName).DataTable();
table.clear().draw();

$(tableName).dataTable({ ... });

Datatables clear (): supprimez simplement toutes les lignes de données du tableau

    function autoRefresh(){
        table.ajax.reload(null,false); 
        alert('Refresh');//for test, uncomment
    }

    setInterval('autoRefresh()', 5000); 

réinitialiser la table de données avec init et écrire récupérer comme true ..done..so simple

par exemple.

TableAjax.init();
retrieve: true,