Running the example at datatables.net got errors

cpmfpga

I am new to datatable and now getting familiar with datatable by running examples.
When I run the example at "https://datatables.net/examples/api/multi_filter.html", I got an error message:

The third row of javascript code in this example:
this.api()
Error message: 'Property 'api' does not exist on type 'Config'. ts(2339)'

My running configurations are
"datatables.net": "^1.13.7",
"jquery": "^3.7.0",

Would you give me some suggestions to resolve this problem.
Thanks in advance.

allan

That's a Typescript error rather than a runtime error. I'll look into what is causing the issue there, but you could try: (this as any).api() which will workaround it.

Allan

cpmfpga

Thanks for your response. It really resolve the problem.

But after adjusting some codes of this example:

    new DataTable('#example', {
      initComplete: function () {
          (this as any).api()
              .columns()
              .every( () => {
                  let column = this;
                  let title = (column as any).footer().textContent; ////

                   // Create input element
                  let input = document.createElement('input');
      . . .

the debugger gave me an error:
ERROR TypeError: column.footer is not a function
at _Api.<anonymous> (app.component.ts:18:47)
at _Api.<anonymous> (jquery.dataTables.mjs:9706:7)
at _Api.iterator (jquery.dataTables.mjs:7201:16)
at _Api.<anonymous> (jquery.dataTables.mjs:9695:15)
at _Api.every (jquery.dataTables.mjs:7340:18)
at jQuery.fn.init.initComplete (app.component.ts:16:16)
at jquery.dataTables.mjs:6773:18
at Function.map (jquery.js:506:13)
at _fnCallbackFire (jquery.dataTables.mjs:6772:11)
at _fnInitComplete (jquery.dataTables.mjs:4857:2)

I have no idea how to handle it.
Would you give me some help, thanks a lot.

allan

You've changed it to use an arrow function, which changes the scope of the function. Instead of this being set by the caller, it is now the same scope as the host function's.

Use .every( function () { instead and it should work.

Allan

cpmfpga

Thanks again for your kindly reply.

I change back the function notation as you said, '.every( function () {' ,and I get the error:

. . .
            .every(function () {
                let column = this;  ////
. . .

'this' implicitly has type 'any' because it does not have a type annotation.ts(2683) .

Then, I find that there are some comments for this error on [here].(https://stackoverflow.com/questions/41944650/this-implicitly-has-type-any-because-it-does-not-have-a-type-annotation "here")

Following these comments by changing to
.every(function(this:any) {
the problem is resolved.

I think this approach is similar to the suggestion you gave in the first reply.

allan

Interesting. I guess you could do:

let column = this as any;

as well.

Really though, what is needed is for me to fix the typing for those callbacks. I'll get that done!

Allan