web-dev-qa-db-fra.com

Comment recharger / actualiser jQuery dataTable?

J'essaie d'implémenter une fonctionnalité selon laquelle cliquer sur un bouton à l'écran provoque l'actualisation de mon jQuery dataTable (car la source de données côté serveur a peut-être changé depuis la création du 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 d'actualiser le dataTable lorsque l'utilisateur clique sur le bouton? Merci d'avance!

javascriptjquerydatatables
69
IAmYourFaja

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

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

28
Xavier

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

113
atmelino

Vous pouvez utiliser une API complète de DataTable pour le recharger de ajax.reload()

Si vous déclarez votre date comme étant DataTable() (nouvelle version), vous avez besoin des éléments suivants:

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

Si vous déclarez votre datatable comme dataTable() (ancienne version), il vous faut:

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

Détruisez d'abord le datatable et ensuite dessinez le datatable.

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

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

d'abord, obtenez les données avec la méthode de votre choix, j'utilise ajax après la soumission des résultats qui modifieront la table. 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 ()

19
Mosd

Cette réponse simple a fonctionné pour moi

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

ref https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event

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

Si vous souhaitez ajouter un bouton de rechargement/d'actualisation à 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();
}
10
Vibin TV

Essayez de détruire datatable en premier, puis de le configurer à nouveau, exemple

var table;
$(document).ready(function() {
    table = $("#my-datatable").datatable()
    $("#my-button").click(function() {
        table.fnDestroy();
        table = $("#my-datatable").dataTable();
    });
});
3
Hoàng Nghĩa

Voilà comment je le fais ... Peut-être pas la meilleure façon, mais c'est vraiment plus simple (IMHO) et ne nécessite aucun plugin 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 travail avec jQuery dataTable, parfois si vous n'avez pas <thead></thead><tbody></tbody> cela ne fonctionne pas. Mais vous pourrez peut-être vous en passer. Je ne sais pas exactement ce qui le rend nécessaire ou non.

3
Drew Chapin

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

3
Ad Kahn

Si vous utilisez l'attribut url, faites juste

table.ajax.reload()

Espère que ça aide quelqu'un

2
Herman Demsong

eh bien, vous n'avez pas indiqué 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 DataTable.

comme ça

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

Utilisez ce code lorsque vous souhaitez actualiser votre datatable:

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

Les DataTables d’Allan Jardine sont un plugin jQuery très puissant et astucieux pour l’affichage de données tabulaires. Il a beaucoup de fonctionnalités et peut faire la plupart de ce que vous pourriez vouloir. Une chose qui est curieusement difficile, cependant, est de savoir comment actualiser le contenu de manière simple. C’est pourquoi, pour ma propre référence, et éventuellement aussi pour le bénéfice des autres, voici un exemple complet d’une façon 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);
});

Source

1
Michel Ayres

J'avais fait quelque chose qui a trait à cela ... Voici un exemple de code javascript avec ce dont vous avez besoin. Il y a une démonstration à 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');
    }
}
0
Mwangi Thiga

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

Cela a fonctionné pour moi sans utiliser ajax.

0
T-Jayanth Dore

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

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

0
Manthan Patel

si vous utilisez datatable v1.10.12, appelez simplement la méthode .draw() et transmettez vos types de tirage requis, à savoir full-reset, page, puis vous redessinerez votre dt avec de nouvelles données.

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

// fait de l'action

dt.draw('full-reset')

pour plus de détails sur les docs datatable

0
Jimmy Obonyo Abor
        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++){
            //

.......}

0
user4022380

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

Je veux voulu la base de données multiple à 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' }
        ]
    });
0
user5708151