How to use $.fn.dataTableExt with TypeScript
How to use $.fn.dataTableExt with TypeScript
![farber72](https://datatables.net/forums/uploads/userpics/840/nJJN1116DNI1P.jpg)
Here a working Javascript code: https://jsfiddle.net/afarber/asjuvqdz/
When I try to port it to TypeScript then I get the error in VS Code (for the $.fn.dataTableExt.afnFiltering.push line):
Property 'dataTableExt' does not exist on type 'JQuery'
I have tried to create a test case here at StackBlitz: https://stackblitz.com/edit/typescript-datatables
Thank you for any insights and greetings from Germany
This question has accepted answers - jump to:
Answers
Don't - instead use
$.fn.dataTable.ext
. It is the same object with typings on it.$.fn.dataTable.ext.search
specifically is the property you want. See the manual.Allan
Thank you, Allan, using $.fn.dataTable.ext.search.push() has helped.
Would you also have a hint, why is TypeScript unhappy with renderAvgData call below?
The TypeScript error is
What is the signature of the
renderAvgData
method and what does it return?Allan
It is:
and it is called:
I'm not sure why it is giving that error to be honest! The
void
seems to suggest that the function is returning void, which it obviously isn't.I think it will be a case of trying to narrow it down. For example if you did:
does that give an error?
Allan
Great idea! Sorry, that I am too newbie to come up with that myself. The error for row.child('ABC').show(); is now:
That looks rather like an error on my list in that case! I'll investigate on Monday. Just to check, you are using the current release (1.13.4)?
Allan
Yes, I have the line "datatables.net-dt": "^1.13.4", in the package.json file:
Yup, 100% my error. Apologies for that. I've committed a fix and the plan is for 1.13.5 to drop tomorrow, which will include that fix.
Allan
Thank you Allan, I will try it out!
Do you develop the Datatables plugin in Typescript?
I am asking, because I have just finished a Udemy course on Typescript![:D :D](https://datatables.net/forums/resources/emoji/lol.png)
Or are you planning to switch to it in future? I am in no way "preaching" and am asking out of pure curiosity.
No - it is plain Javascript with an ES3 target. If I were starting it over, then yes, I'd write it in Typescript (DataTables was started long before Typescript existed). Our newer extensions are all Typescript, CloudTables is as well and also Editor.
Moving DataTables core to Typescript is something I'd like to do, but it would be a large effort and there are other things I want to do first. Some day...
Allan
I have noticed, that the both links shown in the screenshot below (to the doc and the commit) at https://cdn.datatables.net/1.13.5/#Fixes do not work:
Possibly a known issue?
Doh - I had a typo in the function name - it should be
row().child().show()
.There is also a typo in the URL. This is the correct commit.
I've got them updated in the notes locally and will deploy shortly.
Thanks,
Allan
Allan, I have changed the line in packages.json to:
and then run "npm ci" and "npx tsc"... but the error message is unchanged for me:
Hopefully I am not doing something obviously stupid, being a Typescript and VS Code and npm newbie. But I tried changing the line to the (non existing) 1.13.6 and then get the expected error message:
Then I change the line back to 1.13.5 - and the ".show()" related error is back in VS Code.
I've just tried it in the Typescript playground (example code) and it appears to work okay there.
After doing an
npm install
on the 1.13.5 version of DataTables, perhaps you might have needed to reload the VSCode window for it to have picked up the new typing?Allan
I have finally realized, that "datatable.net-dt" is just the data types. And in my package.json the actual "datatable.net" was missing.
So I have added both to my package.json:
And after that I have executed:
and finally the VS Code was no more showing the ".show()" error.
Thank you!
datatable.net
is a dependency ofdatatables.net-dt
. The-dt
package is largely redundant, but it is available to match the styling integrations such as Bootstrap 5 (datatables.net-bs5
).Anyway, good to hear you've got it working now - phew!
Allan