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.