searchPanes not working with download CDN bundle and require.js
searchPanes not working with download CDN bundle and require.js
blacksteel1288
Posts: 14Questions: 2Answers: 0
Link to test case: http://live.datatables.net/ceredela/1/edit
Debugger code (debug.datatables.net):
Error messages shown: None
Description of problem: No searchPanes appear
I'm unable to get searchPanes to appear on my table using the bundled download link and require.js as the package manager. See test case link here: http://live.datatables.net/ceredela/1/edit
The configs on the test case match the setup I'm using (generally), which has worked fine for other functions.
No error messages are shown, just no searchPanes appear in the output.
This seems related to my earlier problem I reported with the buttons (https://datatables.net/forums/discussion/72255), although in that case an error message is shown and nothing works. (I would have replied to that discussion also, but I was offline for a few weeks and now there's no longer a reply button on that forum question)
In this test case, the table does show and searching and sorting function, just not searchPanes.
It seems like there have been related problems reported, however, I couldn't determine the solution:
https://datatables.net/forums/discussion/comment/113238/#Comment_113238
https://datatables.net/forums/discussion/51373
Any help appreciated!
This question has accepted answers - jump to:
Answers
As Allan said in the link you referred to, "Are you able to create an example for us which shows the issue?" That would help us to determine what's going on,
Colin
Yes, please see my test case link here: http://live.datatables.net/ceredela/1/edit
Thank you!
Thanks, but we need to see a running test case - something that we can debug...
Colin
Hi @colin,
I'm not exactly sure what you need to see. Could you help me understand better? Maybe point me to another example?
In the example link (http://live.datatables.net/ceredela/1/edit), I have included a table using the settings to enable searchPanes. i.e. --
I've also added the require.js code that I'm using to load the various libraries, which is related to the source of the problem, I believe. In the output tab, it is showing the problem, which is that no searchPanes appear.
I'm not sure this is possible in RequireJS without loading the individual modules from different files. While SearchPanes is in there, there is nothing to tell RequireJS which module inside the CDN concatenated file is SearchPanes (rather than any of the other modules).
I'm no expert at RequireJS though, so I might well be missing something myself! I think you'd need to list the files individually and load them as needed (with their own dependencies).
I think if we were to use named modules, that would resolve the issue, but that is actively discouraged by the RequireJS community.
Sorry I don't have an answer for using the concatenated file.
Allan
Ok @allan -- not what I was hoping. I did try using all of the individual module files instead of the bundle (there are many), but that seemed to break more things within RequireJS because of all the dependencies.
If there's a simple RequireJS alternative that works with DataTables, I'd be willing to try, but I'm using Flask/Python not npm or React, which seems to be what most package managers are designed for.
I've not used require.js but do have some Flask apps with Datatables. I know its not ideal if you want to use a package manager but can't you just create a template that loads the Datatables code as standard
scripttags? Thats what I do and that is how you are loading the CSS files in the test case.Kevin
Here is how it can be done with RequireJS and individual files: http://live.datatables.net/ceredela/4/edit .
I've been thinking about it more, and since we don't name the exports, I just can't see anyway in which RequireJS could tell one module from another in the concatenated file. The best would be to find a way for it to just register all of the modules from the combined file to a single name. How that might be done though... Unsure!
Allan
Reading a little more about it - it appears you need to use RequireJS's optimiser for this kind of thing: https://requirejs.org/docs/optimization.html#wholeproject . This SO discussion on the topic is good. This one is also relevant.
I'm wondering though, with HTTP2, having many different files isn't much of a problem any more (from a network side anyway, perhaps not so much for a spinning hdd without cache!). So the method I used in that latest example would be okay. If there were enough interest, I could look at adding RequireJS to the download builder to automatically build that sore of structure based on the options selected.
Allan
Thanks @allan
I was able to use the individual files version in your latest example to get the searchPanes to function with a require.js setup.
I am running into another strange issue though, related to the bundle css. Although I'm using the same css files as in your example, the row of the selected searchPanel item is not getting highlighted correctly, in blue background. Instead it is a white background, which means the selection becomes invisible.
Using Inspect in Chrome, I see that in my example, the blue background is getting overridden by an additional css section --
This table.dataTable section above, appears after this section --
But it doesn't show in your example, where the highlighting works correctly.
Since this css is "inside" the datatables bootstrap css, it doesn't seem like I have any way to control it or modify. Is there something I can do?
The problem sounds similar to this thread and this thread. Maybe try the nightly version of Seelect. Not sure if that has been rolled into the current release or i it will be the next release.
Kevin
Thanks @kthorngren -- that was it. The first thread you linked.
Updating 'select' to v1.4.0 in both css and js, corrected the problem.
Hi @allan
Following your pattern, I was able to add the responsive .js file to require.js, and it worked.
But, when I added buttons, it fails -- the buttons do not show.
See this updated example: http://live.datatables.net/riwabuhu/1/edit
Any idea what the pattern would be to load the buttons also? (e.g. html5 csv export or others)
Thank you!
Your "dom" setting needs to include a "B" for Buttons.
Thanks @tangerine
New example here: http://live.datatables.net/riwabuhu/2/edit
still not working though
This is how I would do it: http://live.datatables.net/riwabuhu/4/edit .
Allan
Perfect!
Thank you