Greetings everyone! I have a query regarding Javascript DataTables and how it displays data from a MySQL table.

Here's the MySQL query in question:

select LOT_LOCATION, `Zone Attribute`, a.LOTID, Design_ID, ifnul(Board_ID,'') as Board_ID1, QA_WORK_REQUEST_NUMBER, QA_PROCESS_TYPE, QA_PROCESS_NAME, CURRENT_QTY, Date, Temperature, Humidity, CONCAT(b.Zone1_Voltage, 'V, ', b.Zone1B_Voltage, 'V, ',b.Zone1C_Voltage, 'V') AS Voltage_1, CONCAT(b.Zone1_Current, 'A, ', b.Zone1B_Current, 'A, ',b.Zone1C_Current, 'A') AS Current_1, CONCAT(b.Zone2_Voltage, 'V, ', b.Zone2B_Voltage, 'V, ',b.Zone2C_Voltage, 'V') AS Voltage_2, CONCAT(b.Zone2_Current, 'A, ', b.Zone2B_Current, 'A', ......(continued)....... b.Zone6_Voltage, 'V, ',b.Zone6C_Voltage, 'V') AS Voltage_6, CONCAT(b.Zone6_Current, 'A, ', b.Zone6B_Current, 'A, ',b.Zone6C_Current, 'A') AS Current_6 from Lab_WIP_History a LEFT join chamber_data b ON a.LOT_LOCATION = b.Testtag  LEFT JOIN chamber_data_1 c ON a.LOTID = c.lotid

And this is the structure of the MySQL table:

LOT_LOCATION, Zone Attribute, LOTID, Design_ID, Board_ID1, QA_WORK_REQUEST_NO, QA_PROCESS_TYPE, QA_PROCESS_NAME, CURRENT_QTY, Date, Temperature, Humidity, Voltage_1, Current_1, Voltage_2, Current_2, Voltage_3, Current_3, Voltage_4, Current_4, Voltage_5, Current_5, Voltage_6, Current_6
'SGHAST.0064', '3', 'CVC66L2.11', 'J39E', '', '106544', 'ROBUSTNESS VALID', 'HAST 110C', '40', '2022-06-13 13:39:42', '109.98', '85.08', '3.6V, 1.95V, V', '0.0A, 0.11A, A', '3.6V, 1.95V, V', '0.0A, 0.1A, A', '3.6V, 1.95V, V', '0.0A, 0.12A, A', '3.6V, 1.95V, V', '0.0A, 0.12A, A', '3.6V, 1.95V, V', '0.0A, 0.12A, A', '3.6V, 1.95V, V', '0.0A, 0.12A, A'

My goal is to display all 24 columns on the same webpage using Javascript DataTables. Below you'll find my JavaScript code:

<script>
  $(document).ready(function() {

    var table = $('#elogbooktable').DataTable( {
      "ajax": {url: "testing_getdetaildata.php", dataSrc: ""},
          'scrollCollapse': false,
          'deferRender':    true,
          'scroller':       true,
          'lengthMenu':     [[50, 75, 100, 200, -1], [50, 75, 100, 200, 'ALL']],
          'iDisplayLength': 50,
          'order': [[ 4, "asc" ]],
          'orderCellsTop' : true,
          'columnDefs': [ {
            'targets': 2,
            'createdCell': function(td, cellData, rowData, row, col) {
              if(rowData[2]) {
                  $(td).html("<a href='http://mamweb.sing.micron.com/MAMWeb/bin/MAMWeb.pl?APP=MAMQASI&ACTION=REPORT&REPORTID=Status&MATYPE=78&FORMAT=HTML&CATEGORIES=ALL&ID="+rowData[2]+"' target='_blank'>"+rowData[2]+"</a>");
              }
            }
          }, {
            'targets': 9,
            'createdCell': function(td, cellData, rowData, row, col) {
              if(rowData[9]) {
                  $(td).text(moment(rowData[9]).format('MM-DD-YYYY hh:mm A'));
              }
            }
          }, {
            'targets': 10,
            'createdCell': function(td, cellData, rowData, row, col) {
              if(rowData[10]) {
                  $(td).text(rowData[10] + " C");
              }
            }
          } ,{
            'targets': 11,
            'createdCell': function(td, cellData, rowData, row, col) {
              if(rowData[11]) {
                  $(td).text(rowData[11] + " %RH");
              }
            }
          }],
          'filterDropDown': {                                       
                        columns: [
                            { 
                                idx: 5
                            }
                        ],
            bootstrap: true
                    },
         rowCallback: function(row, data, index){
            if(new Date(data[42]) < Date.now()){
            $(row).find('td:eq(42)').css('background-color', '#f8d7da');
          }
        },
    });

      <?php $i=13; 
     foreach($columns as $id=>$value) { 
         print "showHideColumn($id, $i);\n";
         $i++;
       } 
      ?>    

    //Add a text search box to each footer cell
    table.columns().every( function () {
      $(this.footer()).html("<input type='text' style='width:100%;' placeholder='Search'/>");
    });
    
    //Full table search functionality
    // Column search function       
    table.columns().every( function () {
      var that = this;
      $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
          that.search( this.value, true ).draw();
        }
      });
    });
    
    var buttons = new $.fn.dataTable.Buttons(table, {
     'buttons': ['pageLength','copyHtml5',
            {
              extend: 'excelHtml5',
            },
            {
              extend:  'print',
            }]
    }).container().appendTo($('#envdetail_wrapper .col-sm-6:eq(0)'));
    
    setInterval( function () {
      table.ajax.reload();
    }, 300000 );
  
  });



  function showHideColumn(id, number) {
    var dtable = $('#elogbooktable').DataTable();
    
    if(dtable.column(number).visible() === true) {
      if($(id).attr("class").includes("btn-primary")) {
          $(id).removeClass("btn-primary");
          $(id).addClass("btn-default");
        }
        dtable.column(number).visible(false);
    }
    else {
      if($(id).attr("class").includes("btn-default")) {
          $(id).removeClass("btn-default");
          $(id).addClass("btn-primary");
        }
        dtable.column(number).visible(true);
    }
  }

 </script>

However, there seems to be an issue where only the first 13 columns are displayed instead of all 24. Any assistance on solving this would be greatly appreciated. Thank you!

UPDATED:

Here is the HTML code included below:

[HTML CODE GOES HERE]