DataTables的日期范围选择器问题

问题描述

我无法让日期范围选择器正确地过滤掉DataTables中的行，这是通过ajax完成的。

当前有创建日期选择器的函数，并单击取消并应用事件，并且当创建日期选择器dateranger（）的函数位于DataTable initComplete中时，除自定义范围外，它将根本无法使用只要。输入字段也不更新，并且停留在第一个预设日期范围内。这使我认为apply事件涉及到一些事情，但是当您选择预设的日期范围时，它仍会触发该事件。

当dateranger（）在initComplete之外时，当您选择新的日期范围时，输入字段会正确更新，但是开始日期和结束日期的变量未定义且传递不正确，因此表不会更改。 / p>

我还尝试将dateranger（）放置在document.ready之后的其他位置，然后日期选择器不会加载。

我的同事认为这是一个竞赛条件问题，但我不知道如何让所有部分协同工作。

下面是在document.ready中调用的表的功能：

let date_max = null
let date_min = null

function fill_table(show_date=false){

  let extra_params = []

  if (show_date){
    extra_params.push("DateStart=" + date_min)
    extra_params.push("DateEnd=" + date_max)
  }

  $("#some_table").DataTable({
    "sAjaxSource": "/data" + "?" + extra_params.join("&"),"destroy": true,"sPaginationType": "numbers","autoWidth": false,"bjQueryUI": true,"bInfo": false,"bProcessing": false,"paging": true,"bServerSide": true,"pageLength": 30,"bLengthChange": false,"columns": [
         {"data": 'element_date'},{"data": 'elemebt_type'},{"data": 'element_status'},{"data": 'element_id'},],"order": [[ 0,"desc" ]],"columnDefs": [
        {
          "visible": false,"targets": [3]
        },"initComplete": function() {

      //date range picker input appending
      $("#some_table_wrapper .ui .row .eight").append('<input class="square form-control filter_element d-inline ml-5" id="date-range" name="dates" aria-label="date" style="max-width:max-content; min-width:250px;">');

      //date range picker builder
      dateranger()

      //filter dates on apply
      $('#date-range').on('apply.daterangepicker',function (ev,picker) {
          date_min = picker.startDate.format('MM/DD/YYYY');
          date_max = picker.endDate.format('MM/DD/YYYY');
          date_max = date_max.replaceAll("/","-")
          date_min = date_min.replaceAll("/","-")
          console.log("before filling table")
          console.log(date_min)
          console.log(date_max)
          fill_table(show_date=true)
      });

      // clear dates on cancel
      $('#date-range').on('cancel.daterangepicker',function(ev,picker) {
        $('#date-range').val('');
        fill_table(show_date=false)
      });
    } //end of initcomplete
  }) 
}

有什么想法或建议吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatables daterangepicker javascript