Spring boot 带有日期范围选择器的Vue DataTable用于筛选日期

我使用Spring Boot在thymeleaf模板中创建了Vue DataTable，我希望实现日期范围选择器，以按开始和结束日期过滤数据。下面是DataTableHTML页面

<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>

-->
var logTable=新的Vue({
el:“日志表”，
数据：{
id:“logTB”，
标题：“[[#{label_logTable}]]”，
标题：[
{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”}，
],
配置：{searchDelay:1000，服务器端：true，处理：true，ajaxDataProp:“数据”，
ajax:parentUrl=contextPath+“rest/logs”，
栏目：[
{data:“id”，defaultContent:，className:“文本中心”，orderable:false，
},
{data:“time”，defaultContent:，className:“对齐中间文本中心”}，
{data:“名称”，defaultContent:，className:“对齐中间文本中心”}，
{data:“log”，defaultContent:，className:“对齐中间文本中心”}，
]
}
},
方法：{
},
计算：{
},
安装的（）{
}
});

我有一个日期范围选择器函数，可以在另一个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> 

$（函数（）{
$（'.dateRangePicker'）.dateRangePicker({
“自动应用”：false，
“自动更新输入”：false，
“摊牌”：没错，
“linkedCalendars”：false，
“showCustomRangeLabel”：true，
'打开'：'对'，
“开始日期”：矩（）.减去（3，'月'），
“endDate”：矩（），
“范围”：{
“今天”：[时刻（），时刻（）]，
“本周”：[moment（）.startOf（'Week'）。添加（1，'days'），moment（）.endOf（'Week'）。添加（1，'days'）]，
“本月”：[moment（）.startOf（'Month'），moment（）.endOf（'Month'），
“今年”：[时刻（）.startOf（'Year'），时刻（）.endOf（'Year'）]
},
区域设置：{
“格式”：“YYYY-MM-DD”
，“分隔符”：“-”
，'applyLabel'：'Apply'
，“取消标签”：“取消”
，'customRangeLabel'：'CustomRange'
}
}，函数（开始、结束、标签）{
$（'.dateRangePicker'）.val（start.format（'YYYY-MM-DD'）+'-'+end.format（'YYYY-MM-DD'））；
url=parentUrl+'？startDate='+start.format（'yyyyy-MM-DD'）+'&endDate='+end.format（'YYYY-MM-DD'）；
logTable.ajax.url（url.load）；
});
});

最后，带有开始和结束日期的URL被传递给SpringREST控制器

@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 
}

@JsonView（datatableoutput.View.class）
@GetMapping（“/rest/logs”）
公共DataTablesOutput listAllLogs（@RequestParam（value=“startDate”，required=false）字符串startDate，@RequestParam（value=“endDate”，required=false）字符串endDate，DataTablesInput输入）{
//呼叫过滤函数
}

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