查询时间段内容(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);

好了，代码就这么点，不过这个时间段查询时间比较常用，一般在许多软件或者网页都能看到他们：

图去：

效果显著啊！