Question

我无法让日期范围选择器正确地过滤掉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
  }) 
}

有什么想法或建议吗？

DataTables的日期范围选择器问题

0 个答案: