Answers

• kthorngren Posts: 21,352Questions: 26Answers: 4,955

  March 13

  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 Posts: 113Questions: 41Answers: 2

  March 13

  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 Posts: 21,352Questions: 26Answers: 4,955

  March 13 Answer ✓

  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 Posts: 113Questions: 41Answers: 2

  March 13

  That did it, thanks!