[Anne]第四篇：选择一段时间内的数据

最新推荐文章于 2022-10-14 10:43:16 发布

林守中

最新推荐文章于 2022-10-14 10:43:16 发布

阅读量185

点赞数

分类专栏： Anne 文章标签： python flask

本文链接：https://blog.csdn.net/charizard90/article/details/120404148

版权

Anne 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文介绍了如何利用DateRangePicker组件实现在页面加载时仅展示部分数据，提高用户体验。首先引入必要的js和css文件，然后配置HTML和JS代码以创建日期选择器。在用户选择日期范围后，通过回调函数更新显示的日期，并利用Ajax将选择的日期传递给后端，根据这些日期筛选并展示数据。

摘要由CSDN通过智能技术生成

之前实现的报表中，数据会在页面加载的时候将整张表的数据加载进来，然后进行展示。但实际情况中，一张表的数据可能很多，而用户通常并不会关心很久以前的数据，在一开始加载所有的数据显然是一个性价比很低的行为。因此，一开始展示一段时间内的数据，并提供给用户自行选择时间的组件是十分必要的。

Date Range Picker

Date Range Picker是一个日期选择的组件，其官网是http://www.daterangepicker.com/。Date Range Picker提供了许多不同的展示方式，Anne选择了预定义时间范围。
首先加载必要的js和css文件：

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>

在html中加上日期选择器的区块：

<div id="date-range-picker" class="pull-left input-lg" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc">
    <i class="fa fa-calendar input-lg"></i>&nbsp;
    <span></span> <b class="caret"></b>
</div>

在js中添加上对应的代码：

$("#date-range-picker").daterangepicker({
    startDate: moment().subtract(6, "days"),
    endDate: moment(),
    maxDate: moment(),
    ranges: {
        "Today": [moment()],
        "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
        "Last 7 Days": [moment().subtract(6, "days")],
        "Last 30 Days": [moment().subtract(29, "days")],
        "This Month": [moment().startOf("month")],
        "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
    }
});
$("#date-range-picker span").html(moment().subtract(6, "days").format("MMMM D, YYYY") + " - " + moment().format("MMMM D, YYYY"));

这样在页面中就出现了一个日期范围选择器：
在这里插入图片描述
但此时选择日期并不会让展示的日期发生变化，需要为日期范围选择器添加一个回调：

let dateRangePickerCallback = function(start, end) {
    $("#date-range-picker span").html(start.format("MMMM D, YYYY") + " - " + end.format("MMMM D, YYYY"));

$("#date-range-picker").daterangepicker({
    startDate: moment().subtract(6, "days"),
    endDate: moment(),
    maxDate: moment(),
    ranges: {
        "Today": [moment()],
        "Yesterday": [moment().subtract(1, "days"), moment().subtract(1, "days")],
        "Last 7 Days": [moment().subtract(6, "days")],
        "Last 30 Days": [moment().subtract(29, "days")],
        "This Month": [moment().startOf("month")],
        "Last Month": [moment().subtract(1, "month").startOf("month"), moment().subtract(1, "month").endOf("month")]
    }
}, dateRangePickerCallback);

这样日期的展示就会随着时间变化了。

筛选展示数据

设置好了Date Range Picker后，日期的选择并没有对报表中的数据展示生效，接下来需要做的就是将选择的日期传给后端实现对数据的筛选。
Date Range Picker可以通过下列代码获取到当前选择到的开始时间和结束时间。

let start_date = $('#date-range-picker').data('daterangepicker').startDate;
let end_date = $('#date-range-picker').data('daterangepicker').endDate;

通过ajax的data参数就可以传给后端。

$.ajax({
    url: url,
    type: "get",
    data: {
        start_date: start_date.format('YYYY-MM-DD'),
        end_date: end_date.format('YYYY-MM-DD'),
    },
    success: function (data) { 
        let table = $('#data-table').DataTable();
        table.clear();
        table.rows.add(data).draw();
        table.columns.adjust().draw();
    },
});

通过flask的request可以获取到传入的参数

start_date = request.args.get("start_date")
end_date = request.args.get("end_date")

这样就能够过滤出想要时间段内的数据了

def data(self):
    start_date = request.args.get("start_date")
    end_date = request.args.get("end_date")

    model = self.db_model
    data = model.query.filter(model.date.between(start_date, end_date)).all()
    ret = []
    for row in data:
        ret.append(row.table_row)
    return jsonify(ret)