如何使用 jQuery 日期范圍篩選表

Question

我有一個 data.table 變量“table”，如下所示。 我想使用此表進行日期范圍過濾。 我正在使用日期范圍選擇器到 select 開始和結束日期。

我確實嘗試了下面的方法，但是如果我想在之后清除過濾，它並沒有清除。

 table = $('table[data.table-name="dt-asset-history"]').DataTable({ columns: [ { title: 'Date', data: 'EventDate', class: 'essential dt-nowrap', render: dataTableService.parseDateColumn, type: 'formatteddate' }, { title: 'Events', data: 'EventData', class: 'essential' } ], order: [ [0, 'desc'] ], autoWidth: false, dom: 't', processing: true, bDestroy: true, useFloater: false, paging: false, isResponsive: true, "order": [] }); // Date Range Picker var start = moment().subtract(29, 'days'); var end = moment(); function cb(start, end) { $('#reportrange span').html(start.format('DD - MMMM - YYYY') + ' - ' + end.format('DD - MMMM - YYYY')); } cb(start, end); $('#reportrange').daterangepicker({ "showDropdowns": true, ranges: { 'Today': [moment(), moment()], 'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')], 'Last 7 Days': [moment().subtract(6, 'days'), moment()], 'Last 30 Days': [moment().subtract(29, 'days'), moment()], 'This Month': [moment().startOf('month'), moment().endOf('month')], 'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')] } }, function(selectedStart, selectedEnd, label) { cb(selectedStart, selectedEnd); console.log('New date range selected: ' + selectedStart.format('DD - MMMM - YYYY') + ' to ' + selectedEnd.format('DD - MMMM - YYYY') + ' (predefined range: ' + label + ')'); // Filtering table table.search.push( function(settings, data, dataIndex) { var min = selectedStart; var max = selectedEnd; var date = new Date(data[0]); if ( (min === null && max === null) || (min === null && date <= max) || (min <= date && max === null) || (min <= date && date <= max) ) { console.log(data) return true; } return false; } );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css" /> <script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js" integrity="sha512-CryKbMe7sjSCDPl18jtJI5DR5jtkUWxPXWaLCst6QjH8wxDexfRJic2WRmRXmstr2Y8SxDDWuBO6CQC6IE4KTA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

Answer 1

我通過使用下面的 function 找到了解決方案。

 // Filtering table $.fn.dataTable.ext.search.push( function (settings, data, dataIndex) { var min = selectedStart; var max = selectedEnd; var date = new Date(data[0]); if ( (min === null && max === null) || (min === null && date <= max) || (min <= date && max === null) || (min <= date && date <= max) ) { return true; } return false; } ); table.draw(); $.fn.dataTable.ext.search.pop();