datatable refresh

gmstephane

Hello
I want to refresh my datatable #table_data after a user select an option in the dropdown list. But the table shows nothing.
here is the

script code

 // Fonction pour capturer la valeur sélectionnée dans le champ de sélection
     function show_data_by_anne_inv_sel(sel) {
        var annee_inv_sel = sel.value;
        // Vérifier si une année a été sélectionnée
        if (annee_inv_sel !== "") {
            // Envoyer la valeur par AJAX au fichier PHP
            $.ajax({
                type: "POST",
                url: "data_activites2_selected.php",
                data: { annee_selected: annee_inv_sel }, // Envoyer la valeur en tant que paramètre nommé
                dataType: "json", // Attendre une réponse JSON
                success: function(data) {
                    // Actualiser le DataTable avec les nouvelles données JSON reçues
                    //$('#table_data').DataTable().clear().rows.add(data).draw();
                    $('#table_data').DataTable().clear().rows.add(data.data).draw();
                },
                error: function(xhr, textStatus, errorThrown) {
                    console.error("Erreur lors de la récupération des données:", errorThrown);
                }
            });
        }
    }

    // Capturer le changement dans le champ de sélection
    $('#annee_inv_sel').change(function() {
        show_data_by_anne_inv_sel(this);
    });

data is display on page loading;

$(document).ready(function() {
    $('#table_data').DataTable({
        "paging": true,
        "scrollX": true,
        "lengthChange": true,
        "searching": true,
        "ordering": true,
        "info": true,
        "responsive": false,
        "autoWidth": false,
        "pageLength": 10,
        "ajax": {
            "url": "data_activ_year_selected.php",
            "type": "POST"
        },
        "columns": [
            { "data": "rank" },
            { "data": "item1" },
            { "data": "item2" },
            { "data": "item" }
        ],
        // fonction pour retourner un message personnalisé en cas de données absentes
        "drawCallback": function(settings) {
            var api = this.api();
            var rows = api.rows().count();
            if (rows === 0) {
                // Aucune donnée retournée, effectuez votre traitement ici
                console.log("Aucune donnée retournée");
                // Par exemple, vous pouvez afficher un message d'erreur ou masquer la table
                //$("#output2").html("Aucune donnée n'a été trouvée.");
            }
        },
       "language": {
            "emptyTable": "Aucune donnée disponible dans le tableau"
        },
        dom: 'Bfrtip',
        lengthMenu: [
            [1, 5, 10, 25, 50, -1],
            ['1 entrée/page', '5 entrées/page', '10 entrées/page', '25 entrées/page', '50 entrées/page', 'Montrer tout']
        ],
        buttons: [
            'pageLength',
            'excel'
        ],
        "fixedHeader": {
            "header": true,
            "footer": true
        },
        "language": {
            "url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/French.json"
        }
    });
});

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

allan

What you have there looks like it should work. As long as data.data contains an array of objects (which contain properties such as rank and item1) that looks like it would work to me.

It obviously isn't though, or you wouldn't have posted here.

If you link to a test page showing the issue I would be happy to look at it and help to debug it.

Allan