前端开始时间–结束时间:
时间段:
<input size="24" type="text" id="datetimeStart" readonly class="form_datetime">
--
<input size="24" type="text" id="datetimeEnd" readonly class="form_datetime">
<button type="button" class="btn btn-info btn-sm" id="findData">搜索</button>
<table id="smoke" style="width: 100%;" class="table table-striped table-bordered">
<thead>
<tr>
<th>projectname</th>
<th>buildname</th>
<th>starttime</th>
<th>endTime</th>
<th>totalcases</th>
<th>totaltime</th>
<th>failcases</th>
<th>skipcases</th>
<th>passrate</th>
<th>downtime</th>
<th>flashtime</th>
</tr>
</thead>
<tbody id="smoke_tbody">
</tbody>
</table>
<script type="text/javascript">
$(function () {
$(".form_datetime").datetimepicker({
todayBtn: true,
language: 'zh-CN',
autoclose: true, //当选择一个日期之后是否立即关闭此日期时间选择器
todayHighlight: true,
startView:2, //点开插件后显示的界面。0、小时1、天2、月3、年4、十年,默认值2
minView : 0,//插件可以精确到那个时间,比如1的话就只能选择到天,不能选择小时了
maxView: 4,//同理
forceParse: true,
format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认值: 'mm/dd/yyyy'
todayBtn : true,//是否在底部显示“今天”按钮
todayHighlight : true,//是否高亮当前时间
keyboardNavigation : true,//是否允许键盘选择时间
language : 'zh-CN',//选择语言,前提是该语言已导入
pickerPosition : "bottom-right",//显示的位置,还支持bottom-left
initialDate : new Date(),//初始化当前日期
});
//日期时间选择器
$("#datetimeStart").datetimepicker({
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
minView: "month",
maxView: "decade",
todayBtn: true,
pickerPosition: "bottom-left",
language: 'zh-CN',
startDate:new Date(),
initialDate : new Date(),//初始化当前日期
}).on("click",function(ev){
$("#datetimeStart").datetimepicker("setEndDate", $("#datetimeEnd").val());
});
$("#datetimeEnd").datetimepicker({
format: "yyyy-mm-dd hh:ii:ss",
autoclose: true,
minView: "month",
maxView: "decade",
todayBtn: true,
pickerPosition: "bottom-left",
language: 'zh-CN',
startDate:new Date(),
initialDate : new Date(),//初始化当前日期
}).on("click",function(ev) {
$("#datetimeEnd").datetimepicker("setStartDate", $("#datetimeStart").val());
});
$.ajax({
type: "get",
url: "/findSmokeDataByDate",
data: {
"startTime": moment().format("YYYY-MM-DD"), // 当天时间
"endTime": moment().add(1, "days").format("YYYY-MM-DD")// 明天时间
},
success: function (data) {
console.log(data);
updateSmokeTable(data);
},
error:function (msg) {
alert("网络延迟,请待会加载!");
},
dataType: "json"
});
$("#findData").click(function () {
var startTime = $("#datetimeStart").val();
var endTime = $("#datetimeEnd").val();
$.ajax({
type: "get",
url: "/findSmokeDataByDate",
data: {
"startTime": startTime,
"endTime": endTime
},
success: function (data) {
console.log(data);
updateSmokeTable(data);
},
error:function (msg) {
alert("网络延迟,请待会加载!");
},
dataType: "json"
});
});
$("#smoke").DataTable({
scrollY: 1460,
"scrollX": true, //启动水平滚动
"pageLength": 80,
// lengthChange: false, //每页可显示的数据记录数
// buttons: ['copy', 'excel', 'pdf']
// "pagingType":"full_numbers",
// "order": [[ 3, "desc" ]] //默认排序
});
});
function updateSmokeTable(data) {
// 3.动态修改smokeBrief的数据
// 动态生成table中的tbody
$("#smoke").dataTable().fnClearTable(); //清空一下table
$("#smoke").dataTable().fnDestroy(); //还原初始化了的datatable
// $("#smoke_tbody").empty();
// $("#build").append("<option value = '' disabled selected>请选择版本</option>")
for(var i=0;i<data.length;i++){
var $tr = $("<tr></tr>");
$tr.append("<td>"+data[i].prj_name+"</td>");
$tr.append("<td>"+data[i].build_name+"</td>");
$tr.append("<td>"+data[i].start_time+"</td>");
$tr.append("<td>"+data[i].end_time+"</td>");
$tr.append("<td>"+data[i].total_cases+"</td>");
$tr.append("<td>"+data[i].total_time+"</td>");
$tr.append("<td>"+data[i].fail_cases+"</td>");
$tr.append("<td>"+data[i].skip_cases+"</td>");
$tr.append("<td>"+data[i].pass_rate+"</td>");
$tr.append("<td>"+data[i].downtime+"</td>");
$tr.append("<td>"+data[i].flashtime+"</td>");
$("#smoke_tbody").append($tr);
}
//dataTable重新渲染
$("#smoke").dataTable({
scrollY: 1460,
"scrollX": true, //启动水平滚动
"pageLength": 80,
});
}
</script>