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

Avec la version 1.10.0 de DataTables, c'est intégré et facile :

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

ou simplement

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

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

Answer 2

Détruisez d'abord la table de données et dessinez ensuite la table de données.

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

Answer 3

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

Answer 4

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

Si vous déclarez votre table de données comme DataTable() (nouvelle version) dont vous avez besoin :

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

Si vous déclarez votre table de données comme dataTable() (ancienne version) dont vous avez besoin :

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

Answer 5

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

Tout d'abord, obtenez les données avec la méthode de votre choix, j'utilise ajax après avoir soumis les résultats qui feront des changements dans le tableau. Ensuite, 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()](https://datatables.net/reference/api/clear())