Answers

• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  October 2023

  Its usually best to create a test case or provide a link to your page so we can help debug. So I copied your code into this test case:
  https://live.datatables.net/wujogufo/1/edit

  I updated the CDN links for the Datatables code and removed others that may or may not apply to the problem. I added a column to the table so the number of columns match. The test case executes without errors. There must be something else on your page causing the error.

  Please provide a link to your page or a test case or update the one I posted to show the issue.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• spacemancw Posts: 34Questions: 9Answers: 0

  October 2023

  kthorngren .. thanks very much for looking at this.
  I took you live code and put it into a file and that worked.
  Then I copied elements of my file one by one back into the file to try to get it back to it's original. So I have a working version of it now. But it seems one of my scripts are conflicting wit it and causing double initialization.

  So it looks like the High charts initializes with

  // Create DataTable
   const table = new DataTable('#example');
  

  this is my script for adding and exclude box, so that I can eliminate some of the search results,

  /* Custom filtering function which will search data in column four between two values */
  $.fn.dataTable.ext.search.push(
      function( settings, data, dataIndex ) {
          var exc = $('#exc').val();
  
          //process only if input value
          if (exc.length > 0) {
          var vrc = data[0]; // use data for the vc column
          var clu = data[1]; // use data for the cluster column
          var vfw = data[2]; // use data for the vfw column
          var ver = data[3]; // use data for the version column
          var wan = data[4]; // use data for the WAN column
          var six = data[5]; // use data for the WAN column
          var sev = data[6]; // use data for the seven column
          var eig = data[7]; // use data for the eight column
          var nin = data[8]; // use data for the nine column
          var ref = new RegExp(exc, 'ig');
  
          // VC
          if (vrc.match(ref))
          {
              return false;
          }
  
          // CLUSTER
          if (clu.match(ref))
          {
              return false;
          }
  
          // VFW
          if (vfw.match(ref))
          {
              return false;
          }
  
          // VERSION
          if (ver.match(ref))
          {
              return false;
          }
  
          // WAN
          if (wan.match(ref))
          {
              return false;
          }
  
          //SIX
          if (six.match(ref))
          {
              return false;
          }
  
  
  
  
      }
  
  
          return true;
      }
  );
  
  
  
  $(document).ready(function() {
      $('#example').DataTable( {
          dom: 'Blfrtip',
          buttons: [
  
  
              'colvis',
  
              {
                  extend: 'excelHtml5',
                  exportOptions: {
                      columns:  ':visible'
                  }
              },
              {
                  extend: 'csvHtml5',
                  exportOptions: {
                      columns: ':visible'
                  }
              },
              {
                  extend: 'pdfHtml5',
                  exportOptions: {
                      columns: [ ':visible' ]
                  }
              },
  
              {
                  extend: 'copyHtml5',
                  exportOptions: {
                      columns: [ 0, ':visible' ]
                  }
              },
  
              {
              extend: 'print',
                exportOptions: {
                      columns: ':visible'
                 }
              }
  
          ]
      } );
  } );
  
  $(document).ready(function() {
       var table = $('#example').DataTable();
  
      // Event listener to the two range filtering inputs to redraw on input
      $('#exc').keyup( function() {
          table.draw();
      } );
  } );
  
  
  

  I suspect line 113, " var table = $('#example').DataTable(); " is conflicting with Highcharts. But I'm not sure how to make these 2 scripts play nicely together.

  thanks
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  October 2023

  So it looks like the High charts initializes with
  const table = new DataTable('#example');

  This initializes Datatables with the table containing the id example.

  I suspect line 113, " var table = $('#example').DataTable(); " is conflicting with Highcharts

  This will also initialize Datatables with the id of example.

  The two statements do the same thing they are just using different syntax styles. The syntax is also used to get an instance of the Datatable's API. See this doc for details. The first one that executes will initialize Datatables and the second will just get the Datatables API.

  It could be that you are using const then trying to reassign with var. Javascript constants cannot be reassigned. This might be the issue. I would make sure const table = new DataTable('#example'); executes first and remove var table = $('#example').DataTable();.

  If you still need help then please post a link to a test case that replicates the issue so we can follow the code flow and help debug. Otherwise we will be guessing what the problem might be.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• spacemancw Posts: 34Questions: 9Answers: 0

  October 2023

  Kevin

  thanks. I have set up a live demo here

  https://live.datatables.net/bituyelo/2/
  you will see that it initializes twice.
  But the Exclude still works ...

  Roger
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  October 2023 Answer ✓

  You are initialising the DataTable 4 times there . You only need to do it once.

  Try https://live.datatables.net/bituyelo/3/edit .

  Allan
• spacemancw Posts: 34Questions: 9Answers: 0

  October 2023

  Wow .. good catch! .. thanks very much. It looks and works a whole lot better now.

  Next I have to figure out how to change those chart colors to match the color of the info circles.

  But this is great!
  thanks again