Datatables initialization error and another question

Noodles12

I am using datatables along with highcharts. My goal is when user clicks on buttons 2023, 2022 and ABC button, the charts should reload so that gives animation effect to the user. When I do this, I am running into following issues:

1) I get datatables initialization error when I click on any of the buttons
2) ABC button has chart type column, but it converts it into pie chart.

Here is my test case: https://codepen.io/Shawnny-Tandon/pen/bGJeOev
Thanks.

kthorngren

I get datatables initialization error when I click on any of the buttons

When clicking one of the buttons you are getting this error:

DataTables warning: Non-table node initialisation (DIV). For more information about this error, please see https://datatables.net/tn/2

Followed by this error:

DataTables warning: table id=example1 - Cannot reinitialise DataTable. For more information about this error, please see https://datatables.net/tn/3

Looks like the problem is here:

function reloadChart(chartId, tableId, chartTitle, divId) {
    $('#' + divId).DataTable().destroy();

    const table = new DataTable(tableId, {
        searching: false,
        info: true,
        paging: false,
        sort: false
    });

The first error is caused by this:

$('#' + divId).DataTable().destroy();

I think you want to use tableId instead, like this:

$('#' + tableId).DataTable().destroy();

That should eliminate both errors.

You have this click event handler for all three buttons:

$('.usa-button').on('click', function () {

ABC button has chart type column, but it converts it into pie chart.

It calls reloadChart() which reinitializes Datatables and the chart. It is hard coded to create a pie chart. You will need to change your code logic to handle the tyoe of chart. Maybe pass the chart type into the function? Or possibly use a different click event handler for the ABC button. Many options of what you can do. This is not a Datatables specific issue.

Kevin

Noodles12

Thankyou. I fixed the column chart displaying pie chart issue. However if I change the
code to $('#' + tableId).DataTable().destroy();, clicking on buttons do not animate reloading. The whole reason I am destroying and reloading chart is to animate the charts again when user clicks on the buttons. Is there a way around it? Thanks.

https://codepen.io/Shawnny-Tandon/pen/bGJeOev

kthorngren

Sounds like you want to use jQuery empty() for the div to remove the chart. You will want to destroy the Datatable before using jQuery empty() on the div that it is in.

Kevin

Noodles12

That did it, thanks!