Getting yadcf (for datatables) to work in Angular 2 (jQuery 3)

问题

I have been using the great plugin yadcf for the datatables library. I have been using this in a view for asp.net mvc 5 with no problems. We are currently migrating the application to Angular 2 with ASP.NET Web Api providing the data.

I have moved the code over with minimal changes and have managed to get datatables to work just fine by putting the reference to the datatables library in a script tag on the index.html page that hosts the angular app.

I then run the datatables initialisation code below from within the component that hosts the table.

However whenever I try and do the same with yadcf.init I get:

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

and it crashes.

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
}

Really don't want to lose the filtering functionality in the new application so would be very grateful for help with this!

Is there some key to get this working with angular 2 that I am missing?

Edit

Looks like the error is actually caused by using jquery 3 (see below).

回答1:

I realised that the error had nothing to do with angular at all (it was just being rethrown by angular)!

I had a different version of jQuery (2.2.4 in the original MVC app but had 3.1.0 referenced in the index.html of my angular app)

So it turns out that yadcf doesn't play nicely with jQuery 3.

Specifically within the first line of the yadcf.init(oTable, options_arg, params) function the following assignment is made.

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;
    }
}       

This means yadcf is not initialised and so later when calling yadcf.exFilterColumn(table_arg, col_filter_arr, ajaxSource) the error Cannot read property 'replace' of undefined is thrown.

回答2:

As to the jQuery3 support in yadcf - you must use the yadcf - 0.9.0 (or the last beta version of 0.8.9, its also stated in the changelog file

来源：https://stackoverflow.com/questions/39616477/getting-yadcf-for-datatables-to-work-in-angular-2-jquery-3