jQuery DataTables - 调用多个插件？（日期范围/范围搜索）答案

【问题标题】：jQuery DataTables - Calling multiple plug-ins? (date range / range search)jQuery DataTables - 调用多个插件？（日期范围/范围搜索）
【发布时间】：2021-04-23 08:59:01
【问题描述】：

如何将这 2 个插件组合到我的 jquery 数据表设置中？

当我删除其中一个时，剩下的一个有效（例如：删除日期范围，使用数字进行范围搜索）。我已经在下面链接了两者。

Date Range Plug-in

Range Search Plug-in

调用 DataTable 后，我将调用 table.draw() 以根据我对范围选择器或日期选择器的输入来更新所有内容。

$(document).ready(function(){
    var table = $('#example').DataTable();
}

我在想我的错误是我如何设置 $.fn.dataTable.ext.search.push - 我已经检查了很多次我的 ID 是正确的并且数据索引也是正确的.如前所述，我删除了其中一个插件，而另一个可以工作。我尝试了其他几个我在网上找到的示例，但没有得到任何结果。

  $.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
    var min = parseInt( $('#minNumber').val(), 10 );
    var max = parseInt( $('#maxNumber').val(), 10 );
    var risk = parseFloat( data[0] ) || 0;

    var minDateTime = minDate.val();
    var maxDateTime = maxDate.val();
    var date = new Date( data[1] );

    if ( ( isNaN( min ) && isNaN( max ) ) ||
         ( isNaN( min ) && risk <= max ) ||
         ( min <= risk   && isNaN( max ) ) ||
         ( min <= risk   && risk <= max ) )
    {
        return true;
    }

    if (
        ( minDateTime === null && maxDateTime === null ) ||
        ( minDateTime === null && date <= maxDateTime ) ||
        ( minDateTime <= date   && maxDateTime === null ) ||
        ( minDateTime <= date   && date <= maxDateTime )
    ) {
        return true;
    }
    return false;
}
);

【问题讨论】：

标签： javascript jquery datatables

【解决方案1】：

您需要将数字范围检查器的逻辑与日期范围检查器的逻辑结合起来。您希望在单个 if 语句中评估所有 4 个输入字段，以确定应该隐藏还是显示记录。

目前它们作为两段独立的代码运行，一个接一个。

将它们与&& 运算符组合：

if (((isNaN(min) && isNaN(max)) ||
    (isNaN(min) && risk <= max) ||
    (min <= risk && isNaN(max)) ||
    (min <= risk && risk <= max)) &&
  (
    (minDateTime === null && maxDateTime === null) ||
    (minDateTime === null && date <= maxDateTime) ||
    (minDateTime <= date && maxDateTime === null) ||
    (minDateTime <= date && date <= maxDateTime)
  ))

{
  return true;
} else {
  return false;
}

上述逻辑可能难以阅读 - 因此等效方法如下：

var withinRisk = ( 
    ( isNaN( min ) && isNaN( max ) ) ||
    ( isNaN( min ) && risk <= max ) ||
    ( min <= risk  && isNaN( max ) ) ||
    ( min <= risk  && risk <= max ) 
);

var withinDates = (
    ( minDateTime === null && maxDateTime === null ) ||
    ( minDateTime === null && date <= maxDateTime ) ||
    ( minDateTime <= date  && maxDateTime === null ) ||
    ( minDateTime <= date  && date <= maxDateTime )
); 

if (withinRisk && withinDates)  {
  return true;
} else {
  return false; 
}

在这里，我们将两个范围检查分开，只在最后合并它们。

【讨论】：