Updating HTML Table (with DataTables JQuery plugin) when clicking on data from a chart from HighCharts

The problem I had to solve was to trigger an event as I click on the chart ; the event was to update the corresponding details data within a table that was refreshed as I had clicked on different points on the chart.

Here is the solution :

// the table being identificated by id = table_retard_payment has to be initiated without any filter
    var table =  $('#table_retard_payment').dataTable( {
       "language": {
           "url": "http://localhost/boot/js/DataTables.French.json"
       },
        "ajax": {
            "url": "http://localhost/boot/late_payment.php?function=controle_paiement_retard&param=json",
            "dataSrc": ""
        },
        "columns": [        
            { "data": "purchase_serial_number" },
            { "data": "purchase_creation_date" },
            { "data": "lastmod" },
            { "data": "purchase_status_fraud" }
        ]
    } );

// the chart (identified by id = graph_retard_payment)  with "plotOptions:area" parameter containing the click event with the load of  url adding the x-value of data of the chart : '..&date=' + this.category

    var options_payment = {
        chart: {
            renderTo: 'graph_retard_payment',
            type: 'area',
            marginRight: 50,
            marginBottom: 100
        },
        title: {
            text: 'Répartitions du nbre Commandes en Retards de paiements dans le temps',
            x: -20 //center
        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: []
        },
        yAxis: {
            title: {
                text: 'Nb de Commandes'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                return '<b>'+ this.series.name +'</b><br/>'+
                this.x +': '+ this.y;
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'bottom',
            x: -20,
            y: 200,
            borderWidth: 1
        },
        plotOptions: {
            area: {
                stacking: 'normal',
                lineColor: '#666666',
                lineWidth: 1,
                marker: {
                    lineWidth: 1,
                    lineColor: '#666666'
                },
                 point: {
                    events: {
                        click: function (e) {

                           table= $('#table_retard_payment').DataTable();
                           table.ajax.url("http://localhost/boot/late_payment.php?function=controle_paiement_retard&param=json&date="  + this.category).load();


                        }
                    }
                }
            }
        },
        series: []
    }

IN "aqua", indicate the code code that I added to initiate and update the data table (with datatabvle jquery pluggin)..

Here is the copy screen of the result table with the associated graph :