如何使用 jQuery 以编程方式触发 YADCF 过滤器输入？

Question

除了一个方面，我已经成功地让 YADCF 与 daterangepicker 一起工作：我无法直接从 daterangepicker 'apply' 按钮触发过滤操作。

Click here for screenshot of daterangepicker with YADCF.

如果我设置日期范围然后手动单击输入字段 (.yadcf_daterangepicker)，一切正常，但我无法使用 JS 以编程方式执行此操作。有人可以帮忙吗？

我尝试了以下方法，但它不起作用：

$(".applyBtn.btn").click(function() {
    var e = jQuery.Event('keydown', { which: 13 });
    $(".yadcf_daterangepicker").trigger(e);
});

如果我在其中放置一个警报，它就会触发，所以我知道正在捕获 'apply' 按钮点击 - 它正在将该点击转移到我需要帮助的输入字段。

更新： click here for a JSFiddle example

更新 2：在 Daniel 的帮助下，我使用了以下代码：

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]]);
});

...在 updated fiddle 上完美运行，因为它填充过滤器字段并操作过滤器，但在我真实世界的服务器端脚本上使用相同的代码填充但不操作过滤器。我正在使用所有最新的依赖项，完全按照 fiddle，以相同的顺序，并且在所有其他方面，一切都按预期工作。

我花了好几个小时破解我的复杂应用程序，以至于除了对 fiddle 的依赖之外，它什么都不加载，但仍然没有任何乐趣。我将尽可能多的代码复制到一个新的 fiddle （不是服务器端）并且它有效。因此，我最终手动将静态数据数组编码到我的应用程序中，并删除了 serverSide:true、processing:true 和 ajax:{}，突然间一切都按预期工作了。

结论： 服务器端 JS 或进程中的某些东西阻止 yadcf.exFilterColumn() 在点击包装器中按预期工作。有什么想法吗？

更新 3：在 Daniel 的进一步帮助下，我使用了以下代码，它起到了作用：

$(".applyBtn").click(function() {
    var start = $('.daterangepicker').find('input[name="daterangepicker_start"]').val();
    var end = $('.daterangepicker').find('input[name="daterangepicker_end"]').val();
    //notice the third parameter *true* in exFilterColumn
    yadcf.exFilterColumn(table, [[1, start + ' - ' + end]], true); 
});

Answer 1

至于这个关于如何以编程方式触发 yadcf 的具体问题 - 使用 yadcf.exFilterColumn api 您也可以使用 yadcf.exGetColumnFilterVal。

在你的例子中：

$(".applyBtn").click(function() {
    var e = jQuery.Event('keydown', {
      which: 13
    })
    yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]]);  
  });

但我建议使用 range_date 过滤器，它可以与 jquery-ui / bootstrap-datetimepicker (https://github.com/Eonasdan/bootstrap-datetimepicker) / bootstrap-datepicker (https://github.com/uxsolutions/bootstrap-datepicker)

集成

阅读文档了解更多。

更新，

您必须将第三个参数 true 添加到 exFilterColumn

yadcf.exFilterColumn(table, [[1, yadcf.exGetColumnFilterVal(table,1)]], true);

希望能更新关于这个的文档...

如何使用 jQuery 以编程方式触发 YADCF 过滤器输入？

How can I programmatically trigger a YADCF filter input using jQuery?

jquery

yadcf