129 lines
3.4 KiB
HTML
129 lines
3.4 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>温湿度</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
.tablecenter {
|
|
display: flex;
|
|
/* justify-content: center; */
|
|
/* align-items: center; */
|
|
height: 100vh;
|
|
}
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
/* width: 700px; */
|
|
height: 20px;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 10px;
|
|
text-align: center;
|
|
border: 1px solid #ccc;
|
|
height: 10px;
|
|
}
|
|
|
|
th {
|
|
background-color: #f0f0f0;
|
|
}
|
|
|
|
tr {
|
|
height: 10px;
|
|
}
|
|
|
|
tbody tr:nth-child(even) {
|
|
background-color: #f9f9f9;
|
|
}
|
|
|
|
tbody tr:hover {
|
|
background-color: #e0e0e0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="tablecenter">
|
|
<table id="arpTable">
|
|
<thead>
|
|
<th>温度</th>
|
|
<th>湿度</th>
|
|
<th>时间</th>
|
|
</thead>
|
|
<tbody id="greenTableBody">
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- 下一页，上一页按钮 -->
|
|
|
|
<div class="page">
|
|
<button onclick="prevPage()" id="prevPage">上一页</button>
|
|
<button onclick="nextPage()" id="nextPage">下一页</button>
|
|
</div>
|
|
|
|
<script>
|
|
var currentPage = 1; // 当前页码
|
|
|
|
function loadBlackData() {
|
|
var blackData;
|
|
// fetch("../cgi-bin/green_house_info_show.cgi")
|
|
fetch("../cgi-bin/green_house_info_show.cgi?page=" + currentPage + "&limit=10")
|
|
.then(resp => resp.json())
|
|
.then(data => {
|
|
blackData = data;
|
|
greenTableBody.innerHTML = "";
|
|
data.forEach(rowData => {
|
|
let tr = document.createElement("tr");
|
|
let td1 = document.createElement("td");
|
|
let td2 = document.createElement("td");
|
|
let td3 = document.createElement("td");
|
|
|
|
td1.innerText = rowData.temperature;
|
|
td2.innerText = rowData.humidity;
|
|
td3.innerText = rowData.th_date_time;
|
|
|
|
tr.append(td1, td2, td3);
|
|
greenTableBody.append(tr);
|
|
});
|
|
})
|
|
}
|
|
|
|
window.onload = function () {
|
|
loadBlackData();
|
|
}
|
|
|
|
// HTML 页面中的按钮点击事件处理程序
|
|
|
|
function nextPage() {
|
|
if (currentPage > 10) {
|
|
alert("已经是最后一页了");
|
|
return;
|
|
}
|
|
currentPage++; // 增加当前页码
|
|
loadBlackData(); // 重新加载数据
|
|
}
|
|
|
|
function prevPage() {
|
|
if (currentPage < 1) {
|
|
alert("已经是第一页了");
|
|
return;
|
|
}
|
|
currentPage--; // 减少当前页码
|
|
loadBlackData(); // 重新加载数据
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |