Javascript 数据表的日期范围选择器问题

我很难让日期范围选择器正确地过滤掉数据表中的行，这是通过ajax完成的

当前有创建日期选择器的函数，单击“取消”和“应用”上的事件，当创建日期选择器dateranger（）的函数位于DataTable initComplete中时，除了自定义范围之外，它将完全不起作用。输入字段也不更新，停留在第一个预设日期范围。这让我觉得apply事件有问题，但当您选择预设日期范围时，它仍然会触发此事件

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

我还尝试将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
  }) 
}

let date_max=null
让date_min=null
函数填充表（显示日期=假）{
让额外的_参数=[]
如果（显示日期）{
额外参数推送（“DateStart=“+date\u min”）
额外参数推送（“DateEnd=“+date\u max”）
}
$（“#某些#表”）。数据表({
“sAjaxSource”：“/data”+“？”+额外参数连接（“&”），
“毁灭”：真的，
“sPaginationType”：“数字”，
“自动宽度”：false，
“bjQueryUI”：没错，
“bInfo”：假，
“b处理”：false，
“分页”：正确，
“bServerSide”：正确，
“页面长度”：30，
“bLengthChange”：false，
“栏目”：[
{“数据”：“元素日期”}，
{“数据”：“elemebt_类型”}，
{“数据”：“元素状态”}，
{“数据”：'element_id'}，
],
“订单”：[[0，“说明”]]，
“columnDefs”：[
{
“可见”：假，
“目标”：[3]
},
],
“initComplete”：函数（）{
//日期范围选择器输入追加
$（“#some_table_wrapper.ui.row.eight”）.append（“”）；
//日期范围选择器生成器
dateranger（）
//筛选应用上的日期
$（“#日期范围”）.on（'apply.daterangepicker'，函数（ev，picker）{
date_min=picker.startDate.format（'MM/DD/YYYY'）；
date_max=picker.endDate.format（'MM/DD/YYYY'）；
日期\u max=日期\u max.replaceAll（“/”，“-”）
date\u min=date\u min.replaceAll（“/”，“-”）
控制台日志（“填写表格前”）
控制台日志（日期\分钟）
console.log（最大日期）
填写表格（显示日期=真）
});
//取消时清除日期
$（“#日期范围”）.on（'cancel.daterangepicker'，函数（ev，picker）{
$（“#日期范围”）.val（“”）；
填写表格（显示日期=假）
});
}//初始化结束完成
}) 
}

---

有什么想法或建议吗？

你能分享一下你使用的是哪个库吗？是的，DataTables at和Date Range Picker at