searchPanes not working with download CDN bundle and require.js

searchPanes not working with download CDN bundle and require.js

blacksteel1288blacksteel1288 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

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    Yes, please see my test case link here: http://live.datatables.net/ceredela/1/edit

    Thank you!

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Thanks, but we need to see a running test case - something that we can debug...

    Colin

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    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. --

    dom: 'Plfrtip',
    searchPanes: true,
    

    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.

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    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.

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    but I'm using Flask/Python

    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 script tags? Thats what I do and that is how you are loading the CSS files in the test case.

    Kevin

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    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

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin

    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

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0
    edited May 2022

    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.

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    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 --

    table.dataTable tbody tr td {
        background-color: #fff;
    }
    

    This table.dataTable section above, appears after this section --

    div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody table tr>th, div.dtsp-panesContainer div.dataTables_wrapper div.dataTables_scrollBody table tr>td {
        padding: 5px 10px;
    }
    

    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?

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    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

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    Thanks @kthorngren -- that was it. The first thread you linked.

    Updating 'select' to v1.4.0 in both css and js, corrected the problem.

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    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!

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    Your "dom" setting needs to include a "B" for Buttons.

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    Thanks @tangerine

    New example here: http://live.datatables.net/riwabuhu/2/edit

    still not working though

  • allanallan Posts: 61,439Questions: 1Answers: 10,053 Site admin
    Answer ✓

    This is how I would do it: http://live.datatables.net/riwabuhu/4/edit .

    Allan

  • blacksteel1288blacksteel1288 Posts: 14Questions: 2Answers: 0

    Perfect!

    Thank you

Sign In or Register to comment.