Files
energy_storage/bin/Release/assets/html/testTable.html
2025-07-18 09:09:30 +08:00

128 lines
5.5 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>光储充站控系统</title>
<script src="./libs/jquery/jquery-3.7.1.min.js"></script>
<link rel="stylesheet" href="./libs/DataTables-2.1.8/css/dataTables.dataTables.css" />
<script src="./libs/DataTables-2.1.8/js/dataTables.js"></script>
<style>
body {
/* background-color: #012036; */
/* background-image: url('../ui/bkg01.png'); */
background-size: 100% 100%;
background-attachment: fixed;
}
button {
color: #f0f0f0;
background-color: #44aaec;
border: 1px solid #0a87da;
border-radius: 5px;
margin: 5px;
height: 40px;
font-size: 16px;
}
</style>
</head>
<body>
<table id="myTable" class="cell-border compact hover order-column stripe">
<thead>
<tr></tr>
</thead>
<tbody></tbody>
</table>
</body>
<script>
const dataTablesOption = {
data: [],
columns: [],
bSort: false,
aLengthMenu: [10, 20, 50, 100], //设置每页显示数据条数的下拉选项
displayLength: 20, //每页初始显示最大记录数量
// 设置表格t、分页数据条数l、搜索框f、表格信息i、分页p、加载信息r
//dom: '<"table-ext"<"item"f><"item"l><"item"i><"item"p>>rt',
language: {
sLengthMenu: '每页显示 _MENU_ 条记录',
sZeroRecords: '对不起,查询不到任何相关数据',
sInfo: '当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录',
sInfoEmtpy: '找不到相关数据',
sInfoFiltered: '数据表中共为 _MAX_ 条记录)',
sProcessing: '正在加载中...',
sSearch: '结果中搜索',
paginate: { sPrevious: ' 上一页 ', sNext: ' 下一页 ', },
},
}
$(document).ready(function () {
dataTablesOption.columns = [
{ title: '编号1', width: '50px' },
{ title: '产品名称', width: '150px' },
{ title: '规格型号', width: '150px' },
{ title: '类别', width: '150px' },
{ title: '库存量', width: '80px' },
{ title: '采购总量', width: '80px' },
{ title: '入库总量', width: '80px' },
{ title: '销售总量', width: '80px' },
{ title: '出库总量', width: '80px' },
{ title: '异常总量', width: '80px' },
{ title: '异常说明' },
{
title: '操作',
width: '160px',
render: function (data, type, row) {
return (
'<a href="javascript:void(0);" class="table-btn-edit">编辑</a>' +
// '<a href="javascript:void(0);" class="table-btn-del">删除</a>' +
'<a href="javascript:void(0);" class="">采购</a>' +
'<a href="javascript:void(0);" class="">入库</a>' +
'<a href="javascript:void(0);" class="">销售</a>' +
'<a href="javascript:void(0);" class="">出库</a>'
)
},
},
]
var table = $('#myTable').DataTable(dataTablesOption)
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.row.add(['1', '产品名称', '产品型号', '五金类库/五金制品', '', '', '', '', '', '', ''])
table.draw()
})
</script>
</html>