历史记录页
效果图:
代码分享:
<link href="../CSS/bootstrap.min.css" rel="stylesheet" />
<link href="../CSS/bootstrap-icons.css" rel="stylesheet" />
<link href="../CSS/bootstrap-select.min.css" rel="stylesheet" />
<link href="../CSS/bootstrap-table.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top: 30px;">
<!--头部-->
<div class="alert alert-info form-inline shadow p-3 bg-white border border-info" role="alert">
<div class="row">
<div class="form-inline">
<div class=" form-group mb-2 ml-5">
<label class="col-form-label" for="dateinput" style="margin-right: 12px;">开始日期</label>
<input class="form-control" type="date" id="dateinput" name="dateinput" value="2019-01-01" />
</div>
<div class=" form-group mb-2 ml-5">
<label class="col-form-label" for="dateinputend" style="margin-right: 12px;">结束日期</label>
<input class="form-control" type="date" id="dateinputend" name="dateinputend" value="" />
</div>
</div>
<div class="mb-2 ml-5">
<select class="selectpickers" data-width="fit" data-style="btn-primary">
</select>
<button type="button" class="btn btn-success" id="query">查询</button>
</div>
</div>
</div>
<!--内容区-->
<div class="table-responsive" style="border-radius: 7px; margin-top: -16px;">
<table class="table table-bordered table-hover table-sm" id="tab" style="text-align: center;">
</table>
</div>
</div>
<script src="../JS/jquery-1.10.2.min.js"></script>
<script src="../JS/bootstrap.bundle.min.js"></script>
<script src="../JS/poper.js"></script>
<script src="../JS/bootstrap-select.min.js"></script>
<script src="../JS/bootstrap-table.min.js"></script>
<script src="../JS/bootstrap-table-zh-CN.min.js"></script>
<script>
$(function () {
endt();
setSelectValue();
$("#query").click(function () {
$('#tab').bootstrapTable('destroy');
getData();
});
})
function getData() {
var pm = $('.selectpickers').val();
$.ajax({
type: "post",
url: "../Ashx/orderList.ashx",
data: { pma: pm, begtime: $('#dateinput').val(), endtime: $('#dateinputend').val()},
success: function (d) {
var jsonstr = JSON.parse(d);
var seq = 0;
//需要显示的数据
var data = [];
for (var i = 0; i < jsonstr.ulist.length; i++) {
var item = {
xh: (seq+1),
Date: jsonstr.ulist[i].Date,
Place: jsonstr.ulist[i].Place,
Machine: jsonstr.ulist[i].Machine,
Status: jsonstr.ulist[i].Status,
Matername: jsonstr.ulist[i].Matername,
Qty: jsonstr.ulist[i].Qty,
Note: jsonstr.ulist[i].Note,
Foperdate: jsonstr.ulist[i].Foperdate
};
data.push(item);
seq++;
};
//bootstrap table初始化数据
$('#tab').bootstrapTable({
data: data,
classes: "table table-bordered table-striped", //table-striped表示隔行变色
showRefresh: false, // 是否刷新按钮
sortStable: true,
//******前端分页设置****
pagination: true,
pageNumber:1,
pageSize: 10,
paginationHAlign: "left",
paginationDetailHAlign: "right",
search: true, //******开启搜索框****//
searchOnEnterKey: false, //******回车后执行搜索****//
strictSearch: true, //******完全匹配****//
trimOnSearch: true, //去除关键词空格//
formatLoadingMessage: function () {
return "请稍后,正在加载....";
},
columns: [{
field: 'xh',
title: '序号'
}, {
field: 'Date',
title: '日期'
}, {
field: 'Place',
title: '类型'
}, {
field: 'Machine',
title: '机号'
}, {
field: 'Status',
title: '状态'
}, {
field: 'Matername',
title: '物料'
}, {
field: 'Qty',
title: '数量'
}, {
field: 'Note',
title: '备注'
}, {
field: 'Foperdate',
title: '操作日期'
}]
});
//$('.pagination').html(jsonstr.page);
//$('.text-muted').html("共" + jsonstr.c + "行数据");
}
});
}
function setSelectValue() {
$.ajax({
type: "post",
url: "../Ashx/GetMapping.ashx",
data: "",
success: function (d) {
$(".selectpickers").val("");
var jsonstr1 = JSON.parse(d);
for (var i = 0; i < jsonstr1.ulist.length; i++) {
$(".selectpickers").append("<option>" + (jsonstr1.ulist[i].Place + "_" + jsonstr1.ulist[i].Machine) + "</option>");
}
if (jsonstr1.ulist.length > 0) {
$('.selectpickers').val(jsonstr1.ulist[0].Place + "_" + jsonstr1.ulist[0].Machine);
}
$('.selectpickers').selectpicker('render');
}
});
}
function endt() {
var time = new Date();
var day = ("0" + time.getDate()).slice(-2);
var month = ("0" + (time.getMonth() + 1)).slice(-2);
var today = time.getFullYear() + "-" + (month) + "-" + (day);
$('#dateinputend').val(today);
}
</script>