DataTables not functioning after code transferred to new version of my site
DataTables not functioning after code transferred to new version of my site
farawaypress
Posts: 9Questions: 4Answers: 0
Link to test case:
Original page, working correctly: https://www.comichron.com/yearlycomicssales/postaldata/1960.html
New version, not working: https://www.comichron.com/yearlycomicssales/postaldata/1960boot.html
Debugger code (debug.datatables.net):
Debugger will not run on the new page as it says DataTables is not present.
Description of problem:
I had been using DataTables on a non-mobile friendly HTML site; I am at last tinkering with responsive versions of the pages incorporating Bootstrap. In advance of generating new DataTables code to add the responsive capability, I wanted to just transfer the existing DataTables code from the old version to the new version. I think I moved all the code over, but it does not seem to be working.
I note that your instructions say jQuery must be present somewhere; 3.4.1 is present on the site (and is called because Bootstrap needs it). Oddly, it doesn't look like my previous pages, on which DataTables works fine, make any specific call to jQuery.
It's been so long since I installed it I don't remember why that is -- but now I think it may be related to the initial download. Is the problem that I do have jQuery on the site now and didn't have it before?
This question has an accepted answers - jump to answer
Answers
You're getting the console error,
datatables.min.js:14 Uncaught TypeError: $(...).DataTable is not a function, which happens when you're not including the DataTables javascript files. I can see them on the page's sources, but it's not loading the files on the network tab. I'd check your loading and make sure the necessary files are being loaded,Colin
Thanks for the response. I updated the CDN request to leave out jQuery, since it's already being loaded, and ran it again on the same page: under Network it says "datatables.min.js" loaded successfully, but again for some reason it is still not working.
I also downloaded the files and saved them locally to see if I could get it to work in Live View in Dreamweaver. Again, it's not working, even though I can see datatables.min.js loading on the page.
The only difference I can see between the existing working page and the new not-working one is that the latter also has Bootstrap code -- and also the jQuery version I'm using is 3.4.1, newer than what's on the download page. Everything else should be the same.
UPDATE: In console I can see it saying that "jQuery is not defined" -- but I moved the jQuery load up in <body> to above where the table is, and it is successfully loading. Does it want a different version of jQuery?
Okay, I figured it out. The jQuery load had to be done even earlier, so it was before DataTables. I was confused because Bootstrap wants it at the bottom of the <body> section, but I guess that doesn't matter. It's done!