让 yadcf（用于数据表）在 Angular 2（jQuery 3）中工作答案

【问题标题】：Getting yadcf (for datatables) to work in Angular 2 (jQuery 3)让 yadcf（用于数据表）在 Angular 2（jQuery 3）中工作
【发布时间】：2016-09-21 12:24:23
【问题描述】：

我一直在为数据表库使用出色的插件 yadcf。我一直在将它用于 asp.net mvc 5 的视图中，没有任何问题。我们目前正在将应用程序迁移到 Angular 2，并使用 ASP.NET Web Api 提供数据。

我已经以最小的更改移动了代码，并通过将对数据表库的引用放在承载 Angular 应用程序的 index.html 页面上的脚本标记中，设法让数据表正常工作。

然后我从托管表的组件中运行下面的数据表初始化代码。

但是，每当我尝试对 yadcf.init 执行相同操作时，我都会得到：

Uncaught (in promise): TypeError: Cannot read property 'replace' of undefined

然后它崩溃了。

ngOnInit(){
    this.table = $('#studyList')
                      .DataTable({
                                  serverSide: true,
                                  responsive: true,
                                  processing: true,
                                  ajax: {........
                                          ........
                                        }
                                  .........
                                  });

    // runs fine to here and datatables works when the following is commented out
    // but crashes as soon as i try and initialise yadcf from
    // from within the component as follows.

    yadcf.init(this.table,
        [
            {
            column_number: 5,
            filter_type: 'multi_select',
            select_type: 'select2',    
            data: [
                   { label: 'Included', value: 1 },
                   { label: 'Excluded', value: 2 },
                   { label: 'Insufficiently Screened', value: 4 }
                  ]
            }
        ]);
    // This causes "Uncaught (in promise): TypeError: 
    // Cannot read property 'replace' of undefined" error
}

真的不想失去新应用程序中的过滤功能，因此非常感谢您的帮助！

是否有一些关键可以让我使用我缺少的 angular 2？

编辑

看起来错误实际上是由使用 jquery 3 引起的（见下文）。

【问题讨论】：

提供一个测试页面的链接，以便调试它

标签： jquery angular datatables yadcf

【解决方案1】：

我意识到这个错误根本与角度无关（它只是被角度重新抛出）！

我有一个不同版本的 jQuery（2.2.4 在原始 MVC 应用程序中，但在索引中引用了 3.1.0。我的 Angular 应用程序的 html)

所以事实证明 yadcf 不能很好地与 jQuery 3 配合使用。

特别是在第一行 yadcf.init(oTable, options_arg, params) 函数进行以下赋值。

function init(oTable, options_arg, params) {
    var instance = oTable.settings()[0].oInstance;

    // ......
    // it is assumed that variable instance has a property called selector         
    // but this is not the case in jquery 3 so all occurrences of 
    // "instance.selector" later in the function are undefined.
    // ......

    $(document).data(instance.selector + "_filters_position", params.filters_position);

    if ($(instance.selector).length === 1) {
        setOptions(instance.selector, options_arg, params);
        initAndBindTable(instance, instance.selector, 0, oTable);
    } else {
        for (i; i < $(instance.selector).length; i++) {
            $.fn.dataTableExt.iApiIndex = i;
            selector = instance.selector + ":eq(" + i + ")";
            setOptions(instance.selector, options_arg, params);
            initAndBindTable(instance, selector, i, oTable);
        }
        $.fn.dataTableExt.iApiIndex = 0;
    }
}

这意味着 yadcf 未初始化，因此稍后在调用 yadcf.exFilterColumn(table_arg, col_filter_arr, ajaxSource) 时会抛出错误 Cannot read property 'replace' of undefined。

【讨论】：

【解决方案2】：

关于 yadcf 中的 jQuery3 支持 - 您必须使用 yadcf - 0.9.0（或 0.8.9 的最后一个 beta 版本，changelog file 中也有说明

【讨论】：