Does anything in datatables/searchpanes use the queryString (url parameters)?

tacman1123

I've been trying to debug a situation where adding a querystring to the url of a page that has a datatable doesn't work if that url as search parameters. Everything seems to be the same when interacting with datatables, and I assume it's a bug somewhere in my code (we use the querystring to preselect searchpanes options), but I can't seem to find it.

I'll post a test case, but figured I'd ask this first, just in case there's something in the searchpanes code that looks at the querystring.

kthorngren

What isn't working? Do you get console errors?

How are you using the querystring to preselect the SearchPanes options? Maybe start by posting the relevant code with details of what happens and what you are expecting to happen.

Kevin

tacman1123

Thanks. I'm guessing this is a bug in my code, but I'm struggling trying to find it.

https://kpa.survos.com/song/

This works fine, and the searchpanes work as expected. Everything is ajax, and we get the searchpanes options (the facet stats) back in our response which is then sent to datatables.

We have code in our script that adds the searchpanes values to the querystring, so that we can pre-select certain facets, e.g.

https://kpa.survos.com/song/?school=Albert%20Harris

BUT something is amiss. The filter itself works (that is, the 4 songs show up), but the school and year disappear. The options that are sent are the same as the initial screen (though ideally they'd be cascading searches).

It is possible that those things are related, because my attempts to decrease the searchpanes threshold aren't working either.

kthorngren

Can you point us to where (which file) your Javascript code is for Datatables and handling the querystring?

Kevin

kthorngren

What happens if you set columns.searchPanes.show to true for the writers and schools columns?

The year pane shows with this:

No data 2153
0           1963

This is coming from the ajax options:

                "year": [
                    {
                        "label": 0,
                        "total": 1963,
                        "value": 0,
                        "count": 1963
                    },
                    {
                        "label": "",
                        "total": 2153,
                        "value": "",
                        "count": 2153
                    }
                ],

But its not showing the writers and schools panes although you have the options.

though ideally they'd be cascading searches

Do you have searchPanes.cascadePanes enabled? This is from the Options from Ajax docs:

It is worth noting that searchPanes.cascadePanes and searchPanes.viewTotal are not supported when using this option. While it is still possible to enable these options, it is not advised and may lead to unexpected behaviour.

If you have searchPanes.cascadePanes enabled try turning it off.

Kevin

kthorngren

It looks like you have server side processing enabled and are doing some custom changes to the ajax request and response to convert the SSP protocol to something your server supports. When using the querystring above to load the page the info element shows Showing 1 to 4 of 4 entries. However when no querystring is supplied the result is 4116 total rows. I wonder if this (Datatables thinking there are 4 rows instead of 4116) has an affect on the threshold calculation.

I would try setting columns.searchPanes.show to true for these columns.

Kevin

tacman1123

Thanks.

This might be is further complicated by a hack (I can't remember if I kept it in) that reverses the total / shown, because it's backwards to me to sort by the total when I'm cascading the searchpanes. I have another discussion open on that issue.

Anyway, thanks for this recommendation, we'll start from there.

tacman1123

How does your consulting work? I'm quite sure you'd be able to fix this faster/better than we can. I assume I'd buy the 200 support credits, and then we'd setup the dev environment. Fortunately, with importmaps it's much easier to onboard a new developer, really just php and the Symfony CLI (no yarn or node).

tacman1123

I think I'm confusing where things like show and threshold are set.

The issue with columnDefs is that most of your examples are with columnDefs, not columns.

https://datatables.net/reference/option/columns.searchPanes.options

Can you point me to a page that shows how to set up searchpanes with individual settings (threshold, show) for each column without needing to know the column number or class? My code seems very fragile because I'm looping through to find column numbers.

        Object.entries(filterColumns).forEach(entry => {
            const [key, value] = entry;
            searchPanesColumns.push(key);
        });


  columnDefs(searchPanesColumns) {
        return [
            {
                searchPanes:
                    {show: true},
                    target: searchPanesColumns

            },
            {targets: [0, 1], visible: true},
            // {targets: '_all',  order:  },
            // defaultContent is critical! Otherwise, lots of stuff fails.
            {targets: '_all', visible: true, sortable: false, "defaultContent": "~~"}
        ];

        // { targets: [0, 1], visible: true},
        // { targets: '_all', visible: true, sortable: false,  "defaultContent": "~~" }
    }

kthorngren

columnDefs is an array of objects where each object contains column options. columns ihas the same structure of an array of column definition objects. So you can copy from one to paste into the other without changes except removing targets when defining column objects.

Here is an example of using columns.searchPanes.show in columns:
https://live.datatables.net/wosunele/1/edit

Contact Allan directly for consultation support.

Kevin

tacman1123

Thanks! Now when I force show to true, I get the values as expected, so the display error was likely an incorrect initialization.