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

C'est comme ça que je fais... Ce n'est peut-être pas la meilleure façon, mais c'est certainement plus simple (IMHO) et ne nécessite pas de plugins supplémentaires.

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

Note : Dans mon travail avec jQuery dataTable, parfois si vous n'avez pas de <thead></thead><tbody></tbody> ça ne marche pas. Mais tu peux peut-être t'en passer. Je n'ai pas vraiment compris ce qui le rend nécessaire et ce qui ne l'est pas.

Answer 2

Si vous utilisez l'attribut url, il suffit de faire

table.ajax.reload()

J'espère que cela aidera quelqu'un

Answer 3

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 la DataTable.

comme ceci

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

Answer 4

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

Cela a fonctionné pour moi sans utiliser ajax.

Answer 5

DataTables d'Allan Jardine est un plugin jQuery très puissant et astucieux. pour l'affichage de données tabulaires. Il possède de nombreuses fonctionnalités et peut faire la plupart des ce que vous voulez. Une chose qui est curieusement difficile cependant, c'est de savoir comment rafraîchir le contenu d'une manière simple, donc j'ai pour ma propre référence, et peut-être pour le bénéfice d'autres personnes également, voici une exemple complet d'une façon de le faire :

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 :