使用 jQuery DataTables 和 MySQL 在网页中显示超过 20 列的数据表

Question

Hi all what I'm trying to do is how to display number of columns using datatables for 20+ columns in the same webpage. I am using MySQL, jQuery datatables and html.

So this is m MySQL query:

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, ',b.Zone2C_Current, 'A') AS Current_2, CONCAT(b.Zone3_Voltage, 'V, ', b.Zone3B_Voltage, 'V, ',b.Zone3C_Voltage, 'V') AS Voltage_3, CONCAT(b.Zone3_Current, 'A, ', b.Zone3B_Current, 'A, ',b.Zone3C_Current, 'A') AS Current_3, CONCAT(b.Zone4_Voltage, 'V, ', b.Zone4B_Voltage, 'V, ',b.Zone4C_Voltage, 'V') AS Voltage_4, CONCAT(b.Zone4_Current, 'A, ', b.Zone4B_Current, 'A, ',b.Zone4C_Current, 'A') AS Current_4, CONCAT(b.Zone5_Voltage, 'V, ', b.Zone5B_Voltage, 'V, ',b.Zone5C_Voltage, 'V') AS Voltage_5, CONCAT(b.Zone5_Current, 'A, ', b.Zone5B_Current, 'A, ',b.Zone5C_Current, 'A') AS Current_5, CONCAT(b.Zone6_Voltage, 'V, ', b.Zone6B_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

This is the MySQL table it generates (there are 24 columns title with 24 columns of data):

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'

And this is 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);
}
}

I tried using 'scrollX': true function but it still only shows me first 13 columns and I am unable to scroll horizontally. Is there a way to solve this display issue? Thank you any help is appreciated!

Answer 1

Make sure you have nowrap class added to your Table element. Ref here