Files

128 lines
5.5 KiB
HTML
Raw Permalink Normal View History

2025-07-18 09:09:30 +08:00
<!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>