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

        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++){
            //

.......}

Answer 2

Selon le [Table de données](https://datatables.net/reference/api/destroy()) aide, je pourrais faire pour ma table.

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

Par exemple : données_1.json > 2500 enregistrements - données_2.json > 300 enregistrements - données_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' }
        ]
    });

Answer 3

Si vous utilisez datatable v1.10.12, il suffit d'appeler .draw() et en passant vos types de dessins requis, c'est-à-dire full-reset , page ensuite vous redessinerez votre dt avec de nouvelles données

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

// faire une action

dt.draw('full-reset')

Pour en savoir plus, consultez la documentation sur les tables de données

Answer 4

J'avais fait quelque chose qui se rapporte à ce sujet... Vous trouverez ci-dessous un exemple de javascript avec ce dont vous avez besoin. Il y a une démo sur 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');
    }
}

Answer 5

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

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