$.fn.dataTable is undefined

gsudhanshu

I am using angular-datatables v 11.2
Now I am trying to replicate custom filtering example in my project
link: https://l-lin.github.io/angular-datatables/#/advanced/custom-range-search

In my component.ts :

ngOnInit(): void {

    $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
      console.log("rolefilter: "+this.roleFilter+" data: "+data[6]);
      if ((this.roleFilter == "") || (this.roleFilter == data[6])) {
        return true;
      }
      return false;
    });

    this.dtOptions = {
      pagingType: 'full_numbers',
      pageLength:5,
      processing:true,
      responsive: true
    };  
  }

The error I am getting is

ERROR TypeError: Cannot read properties of undefined (reading 'ext')
    at UserProfileComponent.ngOnInit (user-profile.component.ts:73:20)
    at callHook (core.js:2573:1)
    at callHooks (core.js:2542:1)
    at executeInitAndCheckHooks (core.js:2493:1)
    at refreshView (core.js:9495:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshComponent (core.js:10651:1)
    at refreshChildComponents (core.js:9277:1)
    at refreshView (core.js:9530:1)

why I am not able to get $.fn.dataTable?? how to fix this error?

colin

I'm guessing because you haven't either loaded the DataTables library files, or the code is running before those files are executed. You can use the debugger to see if DataTables is loaded on that page,

Colin

gsudhanshu

Hi Colin,

I used debugger to upload configuration data:

code: ajehuj

I am loading following scripts in my angular.json file

          "node_modules/jquery/dist/jquery.js",
          "node_modules/admin-lte/plugins/jquery/jquery.min.js",
          "node_modules/datatables.net/js/jquery.dataTables.js",
          "node_modules/datatables.net-responsive/js/dataTables.responsive.js",
          "node_modules/datatables.net-colreorder/js/dataTables.colReorder.js",

Thanks,
Sudhanshu

colin

Yep, thanks, so that's showing that DataTables is loaded on the page when you ran the debugger, which suggests it wasn't loaded when you tried to push your search - so it must be a sequence issue in your scripts. Check and see when that script runs, compared to the loading of the DataTables library files.

Colin

gsudhanshu

Colin,

thanks for your reply.

Now I have moved my code to method changeFilter which is called on select element change

  public changeFilter(event : any, type : string) {
    debugger;
    $.fn.dataTable.ext.search.push((settings, data, dataIndex) => {
      console.log("rolefilter: "+this.roleFilter+" data: "+data[6]);
      if ((this.roleFilter == "") || (this.roleFilter == data[6])) {
        return true;
      }
      return false;
    });
    this.datatableElement.dtInstance.then((dtInstance: DataTables.Api) => {
      dtInstance.draw();
    });
  }

Now I do a change on select much after my datatable is loaded. still getting same error:

ERROR TypeError: Cannot read properties of undefined (reading 'ext')
    at UserProfileComponent.ngOnInit (user-profile.component.ts:73:20)
    at callHook (core.js:2573:1)
    at callHooks (core.js:2542:1)
    at executeInitAndCheckHooks (core.js:2493:1)
    at refreshView (core.js:9495:1)
    at refreshEmbeddedViews (core.js:10605:1)
    at refreshView (core.js:9504:1)
    at refreshComponent (core.js:10651:1)
    at refreshChildComponents (core.js:9277:1)
    at refreshView (core.js:9530:1)

gsudhanshu

The problem is if type $.fn.dataTable.ext on console before changing select it gives me value values

allan

You are likely loading jQuery multiple times on your page. I can see from the above you have at least two:

"node_modules/jquery/dist/jquery.js",
"node_modules/admin-lte/plugins/jquery/jquery.min.js",

I would guess you probably have at least one more somewhere. Without a link to a test case showing the issue I can't say for sure though.

Allan

gsudhanshu

hi Allan,

I have removed 1 jquery but the problem persists

to test.. following steps:
1. http://dev.archer.re/
2. sudhanshu@evareg.com / archermvp
3. go to 'Users' tab on left sidebar menu
4. users datatable is loaded
5. above datatable change the role to either admin or client or vice versa as shown in image below

colin

It looks like jQuery is loaded twice. It fully in this file, scripts.498048cd1a0fc421f7e0.js, and also contained in this file, vendor.0023e0883a2fb7518947.js - it would be worth looking at that,

Colin

colin

And possibly in the jQuery/dist folder too - though I'm not familiar with how Webpack shows the sources,

Colin

gsudhanshu

I have updated my code and removed multiple load of jquery. still same issue

Kindly take a look again following same steps as above

Thanks,
Sudhanshu

allan

You are still loading jQuery in the vendor and scripts files as Colin pointed out.

When your $.fn.dataTable.ext.search.push happens, that jQuery instance doesn't have DataTables attached to it.

You need to load jQuery only once.

Allan

gsudhanshu

Thanks for this.

also this link : https://stackoverflow.com/questions/38855891/angular-cli-webpack-how-to-add-or-bundle-external-js-files
helped me.

I was indeed loading jquery multiple times. :-)
Issue solved