searchpanes when called in module not working

tacman1123

https://jsfiddle.net/tacman1123/r6g3c15a/10/

It's should be the same as https://datatables.net/extensions/searchpanes/examples/customisation/verticalPanes.html

but uses modules instead of local versions.

It's likely something to do with the magic of attaching plugins / extensions to jQuery, which I seem to be confused about.

the error is

_display/:56 Uncaught TypeError: table.searchPanes is not a function
at _display/:56:13

allan

Well, the previous reply (now deleted) earned that user a ban... I hate spam!

I get a bunch of loading error from the example including for Bootstrap 5:

Partitioned cookie or storage access was provided to “https://fiddle.jshell.net/_display/?editor_console=true” because it is loaded in the third-party context and dynamic state partitioning is enabled.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/+esm”. _display:115:26
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/+esm. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/datatables.net-bs5@1.13.7/+esm”. _display:115:26
Loading failed for the module with source “https://code.jquery.com/jquery-3.7.0.js”. _display:115:26
Loading failed for the module with source “https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js”. _display:115:26
Loading failed for the module with source “https://cdn.datatables.net/searchpanes/2.2.0/js/dataTables.searchPanes.min.js”. _display:115:26
Loading failed for the module with source “https://cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js”. _display:115:26

Is that what you are seeing as well? The _display is part of JSFiddle.

It looks like you are loading the UMD files (.js) but are using a module (for which DataTables has .mjs files). e.g. https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js should be https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.mjs.

jQuery don't provide their own ESM (yet), but you could use https://esm.sh/jquery@3.6.3. You'll need to check the Bootstrap part on jsdelivr - I'm not sure about that with the CORS issue.

Allan

tacman1123

Thanks, almost there. I think jsdelivr does return the esm as expected.

https://jsfiddle.net/tacman1123/r6g3c15a/21/

No error messages, but no searchpanes either.

allan

The part to insert it was commented out. Also that method returns a jQuery instance, so you need to use [0] to get the element: https://jsfiddle.net/mjnrqx5f/ .

Allan