查询时间段内容(2)
查询时间段内容(2)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:Visual Studio 2015、查询时间段
作者: 梁柏源
撰写时间:2019/7/6
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
前面说过查询时间段有三个内容并且已经介绍了一个第(2)个,这次我们来分享第(3)个:根据日期-日期简的时间段查询表格内容。当然还是原来的料,还是熟悉的味道, 代码:
插件不变,还是这几个货:
Css:
<link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
Js:
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.bundle.min.js"></script>
<script src="~/Plugins/layui/layui.js"></script>
HTML:
<div class="container-fluid">
<div class="row">
<div class="col-12">
选择时间段:
<input type="date" id="StartDateTime" />
到:
<input type="date" id="EndDateTime" />
<button type="button" id="SearchBtn">查询</button>
</div>
</div>
<div class="row">
<div class="col-12">
<table id="tabStrDate" layui-filter=" tabStrDate "></table>
</div>
</div>
</div>
Script:
表格:
var layer, layuiTable;//保存layui模块以便全局使用
$(function () {
//加载和初始化layui模块
layui.use(['layer', 'table'], function () {
layer = layui.layer, layuiTable = layui.table;
tabStrDate = layuiTable.render({
elem: "#tabStudent",//html table id
url: "/DateTimeTest/SelectDateTime2",//数据接口
cols: [[ //表头
{ type: 'numbers', title: '' },//序号列,title设定标题名称
{ field: 'StudentID', title: 'studentID', hide: true },
{ field: 'StudentName', title: '姓名' },
{ field: 'StudentNumber', title: '编号' },
{ field: 'Birthday', title: '出生日期', },
{ field: 'BirthTime', title: '出生时间' },
]],
page: {
limit: 10,//指定每页显示的条数
limits: [5, 10, 15, 20],//每页条数的选择项
}, //开启分页
});
});
});
下一步:
$("# SearchBtn ").click(function () {
var selectDate = $("# SelectDate ").val();
var endDateTime = $("#EndDateTime").val();
tabStrDate.reload({
where: {
startDateTime: startDateTime,
endDateTime: endDateTime
}, page: {
curr: 1 //重新从第 1 页开始
}
});
});
控制台:
Public ActionResult SelectDateTime2(LayuiTablePage layuiTablePage, DateTime? startDateTime,DateTime? endDateTime)
Var varLinq………
if (startDateTime != null && endDateTime!=null)
{
varLinq = varLinq.Where(s =>s.Birthday>=startDateTime && s.Birthday <= endDateTime);
}
int count = varLinq.Count();
List<StudentVo> list = varLinq.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
LayuiTableData<StudentVo> layuiTableData = new LayuiTableData<StudentVo>
{
count = count,
data = list
};
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
好了,代码就这么点,不过这个时间段查询时间比较常用,一般在许多软件或者网页都能看到他们:
图去:
效果显著啊!