spring-boot - 带有日期范围选择器的 Vue DataTable 来过滤日期

Question

我使用 Spring Boot 在 thymeleaf 模板中有 Vue DataTable，我想实现日期范围选择器来按开始和结束日期过滤数据。以下是 DataTable html 页面。

<div>
    <input type="text" class="dateRangePicker"></input> -->
</div>
<script>    
        var logTable= new Vue({
            el: "#logTable",
            data: {
                id: "logTB",
                title: "[[#{label_logTable}]]",
                headers: [
                    { name: "[[#{label_time}]]", className: "sort pr-1 align-middle text-center" },
                    { name: "[[#{label_name}]]", className: "sort pr-1 align-middle text-center" },
                    { name: "[[#{label_log}]]", className: "sort pr-1 align-middle text-center" },
                ],
                configs: { searchDelay: 1000, serverSide: true, processing: true, ajaxDataProp: "data",
                    ajax: parentUrl = contextPath + "rest/logs",
                    columns: [
                        {   data: "id", defaultContent: "", className: "text-center", orderable: false,
                        },
                        { data: "time", defaultContent: "", className: "align-middle text-center" },
                        { data: "name", defaultContent: "", className: "align-middle text-center" },
                        { data: "log", defaultContent: "", className: "align-middle text-center" },
                    ]
                }
            },
            methods: {

            },
            computed: {

            },
            mounted() {

            }
        });
    </script>

我有日期范围选择器功能可以在另一个 html 页面中选择开始和结束日期，如下所示。

<script th:inline="javascript">
    $(function() {
        $('.dateRangePicker').daterangepicker({
            'autoApply' : false,
            'autoUpdateInput': false,
            "showDropdowns": true,
            "linkedCalendars": false,
            'showCustomRangeLabel' : true,
            'opens': 'right',
            'startDate': moment().subtract(3, 'month'),
            'endDate': moment(),
            'ranges' : {
                'Today' : [moment(), moment()],
                'This Week' : [moment().startOf('week').add(1, 'days'), moment().endOf('week').add(1, 'days')],
                'This Month' : [moment().startOf('month'), moment().endOf('month')],
                'This Year' : [moment().startOf('year'), moment().endOf('year')]
            },
            locale : {
                'format': 'YYYY-MM-DD'
                ,'separator': "   -   "
                ,'applyLabel': 'Apply'
                ,"cancelLabel": 'Cancel'
                ,'customRangeLabel': 'Custom Range'
            }
        }, function(start, end, label) {
            $('.dateRangePicker').val(start.format('YYYY-MM-DD') + '   -   ' + end.format('YYYY-MM-DD'));
            url = parentUrl + '?startDate=' + start.format('YYYY-MM-DD') + '&endDate=' + end.format('YYYY-MM-DD');
            logTable.ajax.url(url).load;
    });
});
</script> 

最后，带有开始和结束日期的 URL 被传递给 Spring Rest Controller。

@JsonView(DataTablesOutput.View.class)
@GetMapping("/rest/logs")
public DataTablesOutput<Log> listAllLogs(@RequestParam(value = "startDate", required = false) String startDate, @RequestParam(value = "endDate", required = false) String endDate, DataTablesInput input) {     
    //Call Filter Function 
}

我得到的最终结果是一个文本框，用于选择定义的日期，如今天、本周等。选择日期后，它会显示在文本框中。但是，不会将 URL 传递给 Rest Controller，并且不会重新加载表以反映更改。

标签： spring-bootvue.jsdatatabledaterangepicker