I am using jQuery Datatables to create table with the data pulled from MySQL.
My table looks like this:
LOT_LOCATION, Zone Attribute, LOTID, Design_ID, Board_ID1, QA_WORK_REQUEST_NO, QA_CONTACT_NAME, QA_PROCESS_NAME, CURRENT_QTY, Date, Temperature, Humidity, Voltage, Current
SGHAST.0034 1 CVSBCL2.11 J54K EC100TSI0-017 HAST 110C 40 2022-06-13 13:39:42 28.81 87.9 V1=0.01V, V2=V, V3=V I1=0.0A, I2=A, I3=A
SGHAST.0034 1 CVSBCL2.11 J54K EC100TSI0-017 HAST 110C 40 2022-06-13 17:25:34 26.36 92.51 V1=0.01V, V2=V, V3=V I1=0.0A, I2=A, I3=A
SGHAST.0007 1 CVWHBL2.11 NM112 MP149WSI3-002 HAST 110C 40 2022-06-13 13:39:42 54.97 26.51 V1=0.0V, V2=0.0V, V3=0.0V I1=0.0A, I2=0.0A, I3=0.0A
This is the code for datatables:
$(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");
}
}
}],
rowCallback: function(row, data, index){
if(new Date(data[9]) < Date.now()){
$(row).find('td:eq(9)').css('background-color', '#f8d7da');
}
},
});
This is the code for the search text box on every columns:
table.columns().every( function () {
$(this.footer()).html("<input type='text' style='width:100%;' placeholder='Search'/>");
});
However, instead of displaying search text box at the row below the header/title, each column shows the repeat of the header/title. I do not know what is the main issue with this since the code is correct and applicable in another webpage.
Any help is appreciated thank you!
EDIT:
here is the json file requested:
{
"elogbooktable": [
{
"Lot_location" : "SGHAST.0034",
"Zone Attribute" : 1,
"LOTID" : "CVSBCL2.11",
"Design_ID" : "J54K",
"Board_ID1" : "EC100TSI0-017",
"QA_WORK_REQUEST_NO": "",
"QA_CONTACT_NAME" : NULL,
"QA_PROCESS_NAME" : "HAST 110C",
"CURRENT_QTY" : 40,
"Date" : 2022-06-13 13:39:42,
"Temperature" : 28.81,
"Humidity" : 87.9,
"Voltage" : "V1=0.01V, V2=V, V3=V",
"Current" : "I1=0.0A, I2=A, I3=A",
},
{
"Lot_location" : "SGHAST.0034",
"Zone Attribute" : 1,
"LOTID" : "CVSBCL2.11",
"Design_ID" : "J54K",
"Board_ID1" : "EC100TSI0-017",
"QA_WORK_REQUEST_NO": "",
"QA_CONTACT_NAME" : NULL,
"QA_PROCESS_NAME" : "HAST 110C",
"CURRENT_QTY" : 40,
"Date" : 2022-06-13 17:25:34,
"Temperature" : 26.36,
"Humidity" : 92.51,
"Voltage" : "V1=0.01V, V2=V, V3=V",
"Current" : "I1=0.0A, I2=A, I3=A",
},
{
"Lot_location" : "SGHAST.0007",
"Zone Attribute" : 1,
"LOTID" : "CVWHBL2.11",
"Design_ID" : "NM112",
"Board_ID1" : "MP149WSI3-002",
"QA_WORK_REQUEST_NO": "",
"QA_CONTACT_NAME" : NULL,
"QA_PROCESS_NAME" : "HAST 110C",
"CURRENT_QTY" : 40,
"Date" : 2022-06-13 13:39:42,
"Temperature" : 54.97,
"Humidity" : 26.51,
"Voltage" : "V1=0.0V, V2=0.0V, V3=0.0V",
"Current" : "I1=0.0A, I2=0.0A, I3=0.0A",
}
]
}