从 MySQL 到 JavaScript DataTables 到网页显示 24 列的数据表
[英]Displaying data table of 24 columns from MySQL to JavaScript DataTables to a webpage
问题描述
Hi all I want to ask about javascript DataTables in displaying MySQL query table.
大家好，我想在显示 MySQL 查询表时询问有关 javascript DataTables 的问题。
So this is MySQL query:所以这是 MySQL 查询：
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
And this is MySQL table:这是 MySQL 表：
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'
So what I want is to display all 24 columns in the same webpage.所以我想要的是在同一个网页中显示所有 24 列。 Below here is my javascript code:下面是我的javascript代码：
<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, it does not display all 24 columns with the data but only the first 13 columns.但是，它不会显示所有 24 列的数据，而只显示前 13 列。 Any help is appreciated, thanks!任何帮助表示赞赏，谢谢！
UPDATED:更新：
This is my html code:这是我的html代码：
<!DOCTYPE html>
<html xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="refresh" content="600"/>
<meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
<meta name="author" content="Arun Mohan(arunmohan)">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="image/x-icon" rel="shortcut icon" href="/sg/common/images/favicon.ico" />
<link rel="stylesheet" type="text/css" href="/sg/common/lib/bootstrap-3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/sg/common/lib/dt-1.10.19/css/dataTables.bootstrap.min.css" />
<link rel='stylesheet' type='text/css' href='/sg/common/lib/dt-1.10.19/css/buttons.bootstrap.min.css'/>
<link rel='stylesheet' type='text/css' href='/sg/common/lib/sweetalert2/sweetalert2.min.css'/>
<link rel="stylesheet" type="text/css" href="/sg/common/lib/flag-css/flag-css.min.css" />
<link rel="stylesheet" type="text/css" href="/sg/common/css/fonts.css" />
<link rel="stylesheet" type="text/css" href="/sg/common/css/common-style.css" />
<script type='text/javascript' src="/sg/common/lib/jquery-3.1.0/jquery.min.js"></script>
<script type='text/javascript' src="/sg/common/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='/sg/common/lib/polyfill/browser-polyfill.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/jquery.dataTables.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/dataTables.bootstrap.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/dataTables.buttons.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/buttons.bootstrap.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/buttons.colVis.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/filter.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/jszip.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/pdfmake.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/vfs_fonts.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/buttons.html5.min.js'></script>
<script type='text/javascript' src='/sg/common/lib/dt-1.10.19/js/buttons.print.min.js'></script>
<script type='text/javascript' src="/sg/common/lib/moment-2.15.2/moment.js"></script>
<script type='text/javascript' src="/sg/common/lib/sweetalert2/sweetalert2.min.js"></script>
<script type='text/javascript' src='js/process_verify.js?v=0.1'>
</script>
<?php
include_once("/u/sigqeng/public_html/common/common_micron.php");
$title = "Elogbook";
?>
<title><?php echo $title; ?></title>
<?php
$columns = array("qty"=>"Qty",
"step"=>"Step",
"pkgtype"=>"Package Type",
"numdie"=>"Number of Die in Pkg",
"leadcount"=>"Lead Count",
"pkgsize"=>"Package Size",
"config"=>"Configuration Width",
"rpmww"=>"RPM WW",
"tcweight"=>"TC Weight",
"qacont"=>"QA Contact",
"qaprocessn"=>"QA Process Name"
);
?>
<style>
.swal2-popup {
font-size: 1.6rem !important;
}
</style>
<!-- Matomo
<script type="text/javascript">
var _paq = window._paq || [];
/* tracker methods like "setCustomDimension" should be called before "trackPageView" */
_paq.push(['setUserId', "<?php echo $user; ?>"]);
_paq.push(['trackPageView']);
_paq.push(['enableLinkTracking']);
(function() {
var u="//<?php echo $_SERVER['SERVER_NAME']; ?>/home/analytics/piwik/";
_paq.push(['setTrackerUrl', u+'matomo.php']);
_paq.push(['setSiteId', '3']);
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
})();
</script>
End Matomo Code -->
</head>
<body>
<?php
include("/home/sigqeng/public_html/common/menubar.inc");
?>
<div class="nav-section">
<div style="float: right; text-align: center; padding-right: 12rem;">
<span style="text-align: center">(Refresh Frequency: 5 minutes)</span>
</div>
</div>
<div class="container-fluid content">
<!-- Process Verification -->
<div class="well well-sm text-center">
<form class="form-inline" onsubmit="return false;">
<div class="form-group">
<label class="control-label" for="lotid">Lot ID:</label>
<input type="text" class="form-control" id="lotid" placeholder="Scan Lot ID" style="text-transform:uppercase">
</div>
<div class="form-group">
<label class="control-label" for="process">Process:</label>
<input type="text" class="form-control" id="process" placeholder="Scan Process" style="text-transform:uppercase">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary" onclick="processVerify()">Verify</button>
<button type="reset" class="btn btn-default">Clear</button>
</div>
</form>
</div>
<div class="well well-sm">
Show/Hide: <div class="btn-group text-center">
<?php
$i = 13;
foreach($columns as $id=>$value) {
?>
<button id='<?php echo $id; ?>' class='btn btn-default btn-sm' onclick='showHideColumn("#<?php echo $id; ?>", <?php echo $i; ?>);'><?php echo $value; ?></button>
<?php
$i++; }
?>
</div>
<div class="well well-sm-option text-center">
<form class="chamber-type">
<label for="chamber-type">Chamber Type:</label>
<select id="filterbyChamber">
<option value="">HAST</option>
<option value="">BAKE</option>
<option value="">TC</option>
<option value="">THS</option>
<option value="">THB</option>
<option value="">TS</option>
</select>
</form>
<form action="/action_page.php">
<label for="Date">Date:</label>
<input type="date" id="date" name="date" id="filterbyDATE">
</form>
<form class="shift">
<label for="shift">Shift:</label>
<select id="filterbyShift">
<option value="">1</option>
<option value="">2</option>
</select>
</form>
</div>
</div>
<style>
.chamber-type {
display:inline-block;}
form {
display:inline-block;}
</style>
<div class="well well-sm">
<table id='elogbooktable' class='table table-hover table-striped table-bordered table-responsive table-condensed display nowrap' style="width: 100%;" role="grid" >
<thead>
<tr>
<th>Chamber</th>
<th>Zone</th>
<th>Lot ID</th>
<th>Design ID</th>
<th>Board ID</th>
<th>QAWR</th>
<th>QA Contact</th>
<th>QA Process Name</th>
<th>Quantity</th>
<th>Date</th>
<th>Temperature</th>
<th>Humidity</th>
<th>Voltage_1</th>
<th>Current_1</th>
<th>Voltage_2</th>
<th>Current_2</th>
<th>Voltage_3</th>
<th>Current_3</th>
<th>Voltage_4</th>
<th>Current_4</th>
<th>Voltage_5</th>
<th>Current_5</th>
<th>Voltage_6</th>
<th>Current_6</th>
</tr>
</thead>
<tfoot style='display:table-header-group;'>
<tr>
<th>Chamber</th>
<th>Zone</th>
<th>Lot ID</th>
<th>Design ID</th>
<th>Board ID</th>
<th>QAWR</th>
<th>QA Contact</th>
<th>QA Process Name</th>
<th>Quantity</th>
<th>Date</th>
<th>Temperature</th>
<th>Humidity</th>
<th>Voltage_1</th>
<th>Current_1</th>
<th>Voltage_2</th>
<th>Current_2</th>
<th>Voltage_3</th>
<th>Current_3</th>
<th>Voltage_4</th>
<th>Current_4</th>
<th>Voltage_5</th>
<th>Current_5</th>
<th>Voltage_6</th>
<th>Current_6</th>
</tr>
</tfoot>
</table>
</div>
<script>
$(document).ready(function() {
$('#elogbooktable')
.clone(true)
.addClass('filters');
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>
</body>
</html>
<script>
var searchFilter = () => {
let selectedColor = document.getElementById("filterByChamber").value;
const input = document.querySelector(".form-control");
let textBox= input.value;
const cards = document.getElementsByClassName("col");
for (let i = 0; i < cards.length; i++) {
let title = cards[i].querySelector(".card-body");
if ((cards[i].classList.contains(selectedColor) || selectedColor=="") && title.innerText.toLowerCase().indexOf(textBox.toLowerCase()) > -1) {
cards[i].classList.remove("d-none");
} else {
cards[i].classList.add("d-none");
}
}
}
</script>
1 个解决方案
解决方案1
0 2022-06-21 06:44:29
SOLVED!解决了！ Change this code:更改此代码：
<?php $i=13;
foreach($columns as $id=>$value) {
print "showHideColumn($id, $i);\n";
$i++;
}
?>
To this:对此：
<?php $i=24;
foreach($columns as $id=>$value) {
print "showHideColumn($id, $i);\n";
$i++;
}
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用 jQuery DataTables 和 MySQL 在网页中显示超过 20 列的数据表 - Show more than 20 columns of data table in a webpage using jQuery DataTables and MySQL
从 https:// blob JSON url 调用数据并显示在 Javascript 网页中 - Calling data from https:// blob JSON url and displaying in Javascript webpage
我正在从数据库中获取表数据并显示在表上，但数据表搜索无法处理数据 - I am getting table data from database and displaying on table but datatables search is not working on data
在表中显示来自JavaScript的数组数据 - Displaying array data from JavaScript in table
DataTables表未显示 - DataTables table not displaying
使用Jquery Datatables在表内的表上显示数据时出现问题 - Issue displaying data on a table inside a table using Jquery Datatables
使用带有 HTML 数据表的 Javascript 提交表格数据 - Submitting table's data with Javascript with HTML Datatables
用html表显示MySql数据 - Displaying MySql data with a html table
显示通过来自网页 1 的查询字符串发送的网页 2 上的数据 - displaying data on webpage2 sent through querystring from webpage1
数据表不显示数据 - Datatables is not displaying the data
相关标签