searchPanes not updated after I get data from server side.

kailashkds0

https://editor.datatables.net/manual/php/searchpanes
I am returning below data server side:

{
    "draw": 6,
    "data": [
        {
            "objectID": 1,
            "year": 1894,
            "primaryTitle": "Carmencita",
            "type": "short",
            "imdbId": 1,
            "releaseName": "Carmencita",
            "adult": false,
            "runtimeMinutes": 1
        },
        {
            "objectID": 1533,
            "year": 1911,
            "primaryTitle": "Carmenita the Faithful",
            "type": "short",
            "imdbId": 1533,
            "releaseName": "Carmenita the Faithful",
            "adult": false,
            "runtimeMinutes": null
        }
    ],
    "searchPanes": {
        "options": {
            "type": [
                {
                    "label": "short",
                    "total": 2,
                    "value": "short",
                    "count": 2
                }
            ]
        }
    },
    "recordsTotal": 2,
    "recordsFiltered": 2,
    "tableLength": 2
}

but still my searchPanes is not updated with new count. Is there something I am missing?
Or How can I update searchPanes after i get data from serverside
Thanks in advance

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

but still my searchPanes is not updated with new count. Is there something I am missing?

I don't see anything that stands out as an issue. When you say it doesn't change what does it show for counts before and after this response?

Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tacman1123

To elaborate on this, the data is not being directly returned via AJAX, but via the callback function in datatables.

  let searchPanes = {};
                        if(typeof hydraData['hydra:facets'] !== "undefined") {
                            searchPanes = hydraData['hydra:facets']['searchPanes'];
                        } else {
                            searchPanes = {
                                options: options
                            };
                        }
                        let callbackValues = {
                            draw: params.draw,
                            data: d,
                            searchPanes: searchPanes,
                            recordsTotal: total,
                            recordsFiltered: total, //  itemsReturned,
                        }
                        console.log(callbackValues);

Importantly, the first time this call is made, the searchPanes show up correctly. But subsequent calls don't update the searchPanes. The json posted above is what the final console.log line shows. I'm not sure if there's any difference between the callback and loading the ajax directly, but figured I'd mention it.

tacman1123

Do we need to specifically set cascading searches? The note in the documentation says its up to the server to provide correct data, which we'd doing, obviously the javascript can't know about the rest of the data.

FWIW, we're also using Scroller. I doubt it matters.

Gut feeling is something regarding triggering searchpanes to update to have cascading, server-side results. Is there an example of that anywhere? I don't recall seeing one.

I just discovered this thread, which seems very similar: https://datatables.net/forums/discussion/comment/207775

kthorngren

the data is not being directly returned via AJAX, but via the callback function in datatables.

Oh, it sounds like you are using ajax as a function. That should be fine.

Do you have searchPanes.viewTotal enabled, like this example?

Kevin

tacman1123

The viewTotal option was missing, working now. Thanks!!

kailashkds0

Hello Folks,
I was able to fix this issue but now I am facing another issue.

        // let dt = new DataTable(el, {
        language: {
            searchPlaceholder: 'srch: '// + this.searchableFields.join(',')
        },
        createdRow: this.createdRow,
        // paging: true,
        scrollY: '70vh', // vh is percentage of viewport height, https://css-tricks.com/fun-viewport-units/
        // scrollY: true,
        // displayLength: 50, // not sure how to adjust the 'length' sent to the server
        // pageLength: 15,
        orderCellsTop: true,
        fixedHeader: true,
        cascadePanes  : true,
        deferRender: true,
        // scrollX:        true,
        // scrollCollapse: true,
        scroller: true,
        // scroller: {
        //     // rowHeight: 90, // @WARNING: Problematic!!
        //     // displayBuffer: 10,
        //     loadingIndicator: true,
        // },
        // "processing": true,
        serverSide: true,

        initComplete: (obj, data) => {
            this.handleTrans(el);
            // let xapi = new DataTable.Api(obj);
            // console.log(xapi);
            // console.log(xapi.table);

            // this.addRowClickListener(dt);
            this.addButtonClickListener(dt);
        },

        dom: this.dom,
        // dom: 'Plfrtip',

        // dom: '<"js-dt-buttons"B><"js-dt-info"i>ft',
        // dom: 'Q<"js-dt-buttons"B><"js-dt-info"i>' + (this.searchableFields.length ? 'f' : '') + 't',
        buttons: [], // this.buttons,
        columns: this.cols(),
        searchPanes: {
            viewTotal: true,
            layout: 'columns-1',
        },
        searchBuilder: {
            columns: this.searchBuilderFields,
            depthLimit: 1
        },
        // columns:
        //     [
        //     this.c({
        //         propertyName: 'name',
        //     }),
        // ],
        columnDefs: this.columnDefs(searchFieldsByColumnNumber),
        ajax: (params, callback, settings) => {
            let apiParams = this.dataTableParamsToApiPlatformParams(params);
            // this.debug &&
            // console.error(params, apiParams);
            // console.log(`DataTables is requesting ${params.length} records starting at ${params.start}`, apiParams);

            Object.assign(apiParams, this.filter);
            // yet another locale hack
            if (this.locale !== '') {
                apiParams['_locale'] = this.locale;
            }

            // console.warn(apiPlatformHeaders);
            console.log("calling API " + this.apiCallValue, apiParams);
            axios.get(this.apiCallValue, {
                params: apiParams,
                headers: apiPlatformHeaders
            })
                .then((response) => {
                    // handle success
                    let hydraData = response.data;

                    var total = hydraData.hasOwnProperty('hydra:totalItems') ? hydraData['hydra:totalItems'] : 999999; // Infinity;
                    var itemsReturned = hydraData['hydra:member'].length;
                    // let first = (params.page - 1) * params.itemsPerPage;
                    if (params.search.value) {
                        console.log(`dt search: ${params.search.value}`);
                    }

                    // console.log(`dt request: ${params.length} starting at ${params.start}`);

                    // let first = (apiOptions.page - 1) * apiOptions.itemsPerPage;
                    let d = hydraData['hydra:member'];
                    if (d.length) {
                        console.log(d[0]);
                    }
                    let searchPanes = {};
                    if(typeof hydraData['hydra:facets'] !== "undefined") {
                        searchPanes = hydraData['hydra:facets']['searchPanes'];
                    } else {
                        searchPanes = {
                            options: options
                        };
                    }
                    // if next page isn't working, make sure api_platform.yaml is correctly configured
                    // defaults:
                    //     pagination_client_items_per_page: true

                    // if there's a "next" page and we didn't get everything, fetch the next page and return the slice.
                    let next = hydraData["hydra:view"]['hydra:next'];
                    // we need the searchpanes options, too.



                    let callbackValues = {
                        draw: params.draw,
                        data: d,
                        searchPanes: searchPanes,
                        recordsTotal: total,
                        recordsFiltered: total, //  itemsReturned,
                    }
                    console.log(callbackValues);
                    callback(callbackValues);
                })
                .catch(function (error) {
                    // handle error
                    console.error(error);
                })
            ;

        },
    }

I have added cascadePanes : true, viewTotal: true. And after clicking 2 searchPanes It gives wired error. Below is the error:

jQuery.dataTables.js:8281 Uncaught TypeError: Cannot set properties of undefined (setting '_aData')
at _Api.<anonymous> (jquery.dataTables.js:8281:1)
at _Api.data (jquery.dataTables.js:7315:1)
at SearchPaneST.updateRows (dataTables.searchPanes.js:1621:1)
at SearchPanesST._remakeSelections (dataTables.searchPanes.js:3193:1)
at SearchPanesST._updateSelectionList (dataTables.searchPanes.js:3081:1)
at HTMLTableElement.<anonymous> (dataTables.searchPanes.js:3027:1)
at HTMLTableElement.dispatch (jquery.js:5430:1)
at elemData.handle (jquery.js:5234:1)
at Object.trigger (jquery.js:8745:1)
at HTMLTableElement.<anonymous> (jquery.js:8823:1)

{"@context":"\/api2.0\/contexts\/articles","@id":"\/api2.0\/articles","@type":"hydra:Collection","hydra:totalItems":37,"hydra:member":[{"objectID":50,"id":50,"sourceDate":"2021-08-01T00:00:00+00:00","newsCategory":"generic","marking":"needs_review","topic":null,"host":"nicotinepolicy.net"},{"objectID":51,"id":51,"sourceDate":"2021-04-01T00:00:00+00:00","newsCategory":"generic","marking":"needs_review","topic":null,"host":"nicotinepolicy.net"}],"hydra:facets":{"searchPanes":{"options":{"host":[{"label":"canberratimes.com.au","total":1,"value":"canberratimes.com.au","count":1},{"label":"filtermag.org","total":1,"value":"filtermag.org","count":1},{"label":"nicotinepolicy.net","total":9,"value":"nicotinepolicy.net","count":9},{"label":"prnewswire.com","total":1,"value":"prnewswire.com","count":1},{"label":"snusforumet.se","total":1,"value":"snusforumet.se","count":1},{"label":"thestar.com","total":1,"value":"thestar.com","count":1},{"label":"tobaccofreekids.org","total":23,"value":"tobaccofreekids.org","count":23}],"marking":[{"label":"needs_review","total":37,"value":"needs_review","count":37}],"newsCategory":[{"label":"generic","total":14,"value":"generic","count":14},{"label":"press_release","total":23,"value":"press_release","count":23}]}}},"hydra:view":{"@id":"\/api2.0\/articles?limit=72\u0026searchBuilder=%7B%7D\u0026order%5Bid%5D=asc\u0026attributes%5Boperator%5D=marking%2C%3D%2Cneeds_review\u0026offset=0\u0026facets%5B%5D=marking\u0026facets%5B%5D=newsCategory\u0026facets%5B%5D=host\u0026_locale=en","@type":"hydra:PartialCollectionView"},"hydra:search":{"@type":"hydra:IriTemplate","hydra:template":"\/api2.0\/articles{?order[id],order[sourceDate],attributes,urlHash,urlHash[],marking,marking[],media,media[],media.id,media.id[],properties[]}","hydra:variableRepresentation":"BasicRepresentation","hydra:mapping":[{"@type":"IriTemplateMapping","variable":"order[id]","property":"id","required":false},{"@type":"IriTemplateMapping","variable":"order[sourceDate]","property":"sourceDate","required":false},{"@type":"IriTemplateMapping","variable":"attributes","property":"headlineText, marking, newsCategory, host","required":false},{"@type":"IriTemplateMapping","variable":"urlHash","property":"urlHash","required":false},{"@type":"IriTemplateMapping","variable":"urlHash[]","property":"urlHash","required":false},{"@type":"IriTemplateMapping","variable":"marking","property":"marking","required":false},{"@type":"IriTemplateMapping","variable":"marking[]","property":"marking","required":false},{"@type":"IriTemplateMapping","variable":"media","property":"media","required":false},{"@type":"IriTemplateMapping","variable":"media[]","property":"media","required":false},{"@type":"IriTemplateMapping","variable":"media.id","property":"media.id","required":false},{"@type":"IriTemplateMapping","variable":"media.id[]","property":"media.id","required":false},{"@type":"IriTemplateMapping","variable":"properties[]","property":null,"required":false}]}}

This is the response

kailashkds0

Hello Guys,
I am now able to get updated searchPanes but now the problem is its not showing 0 count searchPanes.

searchPanes: {
layout: 'columns-1',
show: true,
cascadePanes: true,
viewTotal: true,
showZeroCounts: true,
threshold: 0,
hideCount: false,
showEmptyPanes: true,
emptyPanes: false
}

This is my searchPanes settings. Also below is my ajax call response of searchPanes

{"searchPanes":{"options":{"host":[{"label":"thestar.com","total":1,"value":"thestar.com","count":1},{"label":"canberratimes.com.au","total":0,"value":"canberratimes.com.au","count":0},{"label":"filtermag.org","total":0,"value":"filtermag.org","count":0},{"label":"nicotinepolicy.net","total":0,"value":"nicotinepolicy.net","count":0},{"label":"prnewswire.com","total":0,"value":"prnewswire.com","count":0},{"label":"snusforumet.se","total":0,"value":"snusforumet.se","count":0},{"label":"tobaccofreekids.org","total":0,"value":"tobaccofreekids.org","count":0}],"marking":[{"label":"needs_review","total":1,"value":"needs_review","count":1},{"label":"fetch_requested","total":0,"value":"fetch_requested","count":0}],"newsCategory":[{"label":"generic","total":1,"value":"generic","count":1},{"label":"press_release","total":0,"value":"press_release","count":0}]},"showZeroCounts":true}}

Also I am using Callback method to update my datatable via ajax

tacman1123

The example at https://editor.datatables.net/examples/extensions/searchPanes.html doesn't reflect what I think cascading searchPanes should do.

On the left, it says there's 1 phone number, but really it should be 0 (or dimmed), since when I select a phone number there's nothing found:

That's not how the client-side cascading search works:

https://datatables.net/extensions/searchpanes/examples/initialisation/cascadePanes.html

kthorngren

The Editor example you linked to isn't using the searchPanes.cascadePanes option so cascading isn't enabled. To enable this will need to be added to the Datatables config:

        searchPanes: {
            cascadePanes: true
        },

Kevin

tacman1123

OK, this issue is that with server-side processing and cascading panes enabled, the zero result records will always be hidden:

https://editor.datatables.net/examples/extensions/searchPanesCascade.html

However, you could disable cascadingPanes and use viewTotal instead which let's the user see that there are a reduced number of options based on the existing search:

https://editor.datatables.net/examples/extensions/searchPanesViewTotal.html

So if I understand this correctly, cascadingPanes is a client-side option, so shouldn't be set if serverSide: true is set.

tacman1123

The problem is that my code is using ajax and serverSide: true, and casadePanes is strictly client-side. So setting that option to the example at

https://editor.datatables.net/examples/extensions/searchPanes.html

won't work as expected.

kthorngren

The cascadePanes and viewTotal examples you linked to both use server side processing. For these options to work your server side processing script needs to support the parameters documented here. Does your server script support these parameters?

this issue is that with server-side processing and cascading panes enabled, the zero result records will always be hidden:

Yes, that is how cascadePanes works. The same behavior is found in this client side example.

Sorry, I'm not understanding the problem you are trying to solve. Can you post a link to your page or a test case replicating the issue so we can help debug?

Kevin

kthorngren

If I remember comments from your other threads correctly your code is using ajax as a function to parse the ajax response into something Datatables understands. Maybe this function needs debugging to make sure all the SearchPanes parameters are parsed correctly. To help with this I asked for a pointer to the JS file with your Datatables code.

Kevin

tacman1123

Thanks. I think I have everything working now, the problem was that I was setting cascadePanes: true and ajax and serverSide, and indeed the zero records won't work. Not setting it now works as expected, thanks for your help!

kthorngren

indeed the zero records won't work

How does Cascade Panes not work with zero records?

Kevin