SearchPanes not refreshing when serverside is used.

tokrish

Hi Allan,

I'm having problem with **searchpanes **not refreshing its content after ServerSide script has retruned new data.
I have a server-side DT with SearchPanes enabled for two columns. Server-Script returns data + searchPanes options for each Ajax call.

Search Pane config:

searchPanes : {
                initCollapsed   : true,  
                cascadePanes: false,
                dtOpts: {
                    select: {
                        style: 'multi'
                    }
                },
                columns       : [@string.Join(",", @header.FilterColumnIndexes)]
            }

Description of problem:
The initial draw correctly builds the SearchPanes + datatable using the returned JSON.
1. Subsequent draws returning updated (data + searchPanes.options) but the new searchPanes.options are not applied to the searchpane.

Initial draw1:

    {
        "draw": 1,
        "recordsTotal": 1328,
        "recordsFiltered": 0,
        "data": [
            ["Gas", "January"],
            ["Insurance", "January"]
            ...
        ],
        "error": null,
        "searchPanes": {
            "options": {
                "1": [
                        {"label": "Gas", "total": 10, "value": "Gas", "count": 10 }, 
                        {"label": "Insurance", "total": 10, "value": "Insurance", "count": 10 }
                ],
                "2": [
                        {"label": "January", "total": 10, "value": "January", "count": 10 }, 
                        {"label": "March", "total": 10, "value": "March", "count": 10 }
                ]
            }
        }
    }

draw2:

{
    "draw": 2,
    "recordsTotal": 1328,
    "recordsFiltered": 50,
    "data": [
        ["Gas", "January"],
        ["Insurance", "January"]
        ...
    ],
    "error": null,
    "searchPanes": {
        "options": {
            "1": [
                    {"label": "Gas", "total": 10, "value": "Gas", "count": 10 }, 
                    {"label": "Insurance", "total": 10, "value": "Insurance", "count": 10 }
            ],
            "2": [
                    {"label": "January", "total": 16, "value": "January", "count": 16 }
                              ... column 2 rows have reduced or data changed
            ]
        }
    }
}

After draw2 data received, i'm expecting the searchpanes.column2 to change but it's not changing.

1. How can instruct SearchPanes to refresh the content once new JSON has arrived? () => $(tableSel).DataTable().searchPanes.rebuildPane() makes a new ajax call which I don't want.

2. Is there any additional options that can be returned via JSON.searchPanes.options to customise | rebuild the searchPanes?. I.e. returning the searchPanes[field]: option(ajax). Which will help me to rebuild the searchPane with their selections.

Appreciate your help!.

colin

It should be doing that automatically. Are you seeing the same issue with this example? If not, it would be worth ensuring you've updated all yours sources, both the server-side script and the client-side libraries.

Colin

tokrish

Hi Colin, thank you the sunday response.

client side libraries:

Included libraries:
* JSZip 2.5.0, DataTables 1.11.5, Buttons 2.2.2, Column visibility 2.2.2, HTML5 export 2.2.2, Print view 2.2.2, DateTime 1.1.2, Responsive 2.2.9, SearchPanes 2.0.0, Select 1.3.4

Serverside script returns correct JSON response with updated searchPanes.options.
I can see this from 'xhr.dt' event.
The DT is getting correctly refreshed but the SearchPanes are unchanged.

Can you please re-attach your example?
and do you have any example, where I can read more about rebuilding SearchPanes using ajax response? Since my DT is fully server-side, all sorting, searching, cascading filters are happening server-side and I want SearchPanes to take the new ajax response and rebuild its contents_ [if instructed]_ as I instruct.

I'm interested in following options in ajax response dynamically

1. to Indicate if SearchPanes should be rebuilt using the new response.
2. to Indicate which pane should rebuild. (maybe: rebuild only nodes found in searchPanes.options)
3. When rebuilding a pane, assign pre-selections, to maintain the user selection. (I assume I need this function when the pane is rebuilt with new data)

use-case: with two search panes. Multi select enabled.
2. Initial draw returns full dataset for all search panes. two columns
3. Selection in column1 has changed
4. draw2 response indicates column2 should be rebuilt using the new data.
5. selection in column2 has changed.
6. draw3 response indicates no changes in search panes. (this can be simply no searchPanes.options returned at all, or option to rebuild is set to false
7. Selection in column1 has changed (assume multi select enabled and +1 row selected)
8. draw4 response indicates, column2 should rebuild using the new data. New data also contains information of which rows should be pre selected. (maintaining user selection)
9. User clears all selection.
10. draw5 response contains full set of searchPanes.options and search panes are rebuilt like the initial draw.

This would greatly enable server-side DT to control search panes fully via server-side.

Many thanks

colin

Sorry, i meant to post this: https://editor.datatables.net/examples/extensions/searchPanes.html

I'll check your reply later, dashing here, and haven't got the time to give it full attention,

Colin

tokrish

Hi Colin, thank you for the example, In your example, regardless of which option is selected, server always returns the same dtsp option list. I guess that's because the example has cascade option disabled?

My issue is, server-side script is returning updated version of dtsp options but search panes are not updated. I have tried to enable cascadePanes : true with no avail.

Do you have an example where new options are sent from server and panes refreshing according to the new data?

Many thanks

allan

Hi,

This example has cascade enabled.

Are you using any of our server-side libraries for this, or your own code?

Allan

tokrish

Good Morning @allan ,

I use my own server-side code that returns data according to your manuals.
The output can be seen in my 2nd reply for draw1 and 2.

In your example, by looking at Browser Console, for each pane selection, server returns full list searchPanes.options. + the filtered data. On a ServerSide DT, should server not do the backend works and filter dtsp options?

Nevertheless, even if i'm returning full list of dtsp + cascadePane is enabled, i'm not seeing dtsp refreshes. I'm still using array and work with cell indexes. Does this matter ?

allan

On a ServerSide DT, should server not do the backend works and filter dtsp options?

It kind of does. It includes a count parameter which is set to 0, which indicates to the client-side that that option should not be shown.

I agree, that appears to be redundant to me. I'll look into why that was done (the cascade is probably the most complex part of the whole DataTables software suite...).

Allan

tokrish

Hi @allan ,

Are you able to spot anything? My server is now returning the full dtsp option list and sets count = 0 to those that are not found but SP is still not refreshing.

From debugger:

LibraryInfoInstalledLatest
DataTablesUp to date1.11.51.11.5
AutoFill-2.3.7
ButtonsUp to date2.2.22.2.2
ColReorder-1.5.5
Editor-2.0.7
FixedColumns-4.0.2
FixedHeader-3.2.2
KeyTable-2.6.4
ResponsiveUp to date2.2.92.2.9
RowGroup-1.1.4
RowReorder-1.2.8
Scroller-2.0.5
SearchBuilder-1.3.2
SearchPanesUp to date2.0.02.0.0
SelectUp to date1.3.41.3.4

#jq-expired-certificates-table-Id
Data source:    Ajax
Processing mode:    Server-side
Draws:  2
Columns:    6
Rows - total:   4
Rows - after search:    4
Display start:  0
Display length: 10
#DataTables_Table_0
Data source:    DOM
Processing mode:    Client-side
Draws:  6
Columns:    2
Rows - total:   12
Rows - after search:    12
Display start:  0
Display length: 10
#DataTables_Table_1
Data source:    DOM
Processing mode:    Client-side
Draws:  4
Columns:    2
Rows - total:   474
Rows - after search:    474
Display start:  0
Display length: 10

options for dtsp.

    serverside  : true,
    processing : true,
    ...
    searchPanes : {
        initCollapsed : true,  
        cascadePanes  : true,
        dtOpts: {
            select: {
                style: 'multi'
            }
        },
        columns       : [1, 3]
 }

Long version:

probably the most complex part of the whole DataTables software suite

I cannot disagree and thank you for your time and effort. On the other hand, on a server-side DTSP, cascading is probably the easiest part as the panes just show data returned from the server, leaving most work to the server to handle. (cascade filter, calculate view total, etc. Although I'm not aware DT is telling server in any way to calculate view total. Perhaps this is a future request for serverSide dt truly being serverside or an option that indicates hybrid or full serverside.)

Here is my current server logic **before **changing to include count = 0 change.

// ... request and data preparations.
....
// Nodes that require rebuild.
var colIndexes = FilterEnabledColIndexes.Except(request.searchPanes.SelectedColIndexes()).ToList();

// filter data according to the pane selections.
filteredCellData = cellDataList.Where(row => IsSelected(row, selections)).ToList();

// Build SearchPanes options from filtered data. Row + Count. (no view total)
var options = colIndexes.ToDictionary(col => new { key = col.ToString(), elements = MakeListWithTotal(col, filteredCellData)});

// attach SP options to the response
...

The output would be only nodes required to be shown in sp. i.e.

        "searchPanes": {
                "options": {
                    "1": [
                            {"label": "Gas", "total": 10, "value": "Gas", "count": 10 },
                            {"label": "Insurance", "total": 10, "value": "Insurance", "count": 10 }
                    ],
                    "2": [
                            {"label": "January", "total": 16, "value": "January", "count": 16 }
                                      ... column 2 rows have reduced or data changed according to other selections.
                    ]
                }
            }

To conclude:
Once a response is received, DT shows received rows Similar to that, I also wish SP to show/process only rows returned by the server. Without breaking your existing settings, this can be done by informing server with an additional option that everything has to be done by the server and sp only presents the options.

If you prefer, we can meet in [Teams | Zoom]

Good day!

allan

Could you give me a link to your page so I can trace it through please?

Thanks,
Allan

tokrish

Hi @allan, sorry for the delay in response. Just came back from a long holiday. Unfortunately I don't have any public domain to share the page. I could however agree for a zoom call and pay for your time through your support credits. Providing it's my fault

Before I embarrass myself, Is there anything else apart from count = 0 that I should be aware to force the DT to rebuild SP after ajax call returned?

Good day!

allan

Hope you had a nice holiday.

Not as far as I am aware. It might be best to take this example and compare what you are returning to that.

Is it a custom server-side you are using for this?

Can you attach, as a file, the JSON when the table and panes are initially loaded and then the JSON from when you click on an option in one of the panes please? I actually find debugging by Zoom really hard to do, so this would be a good first port of call.

Allan

tokrish

Hi @allan, it was a needed and nice holiday. Thank you.

I'm not using your Editor scripts and I use simple column array to fill the data using my custom backend scripts. As requested, i've attached the result files. Please let me know if they are any helpful.

Files

tokrish

Hi @allan did the files help? Just checking if you have had any time to check.
Good day.

bakis

Hi @tokrish, I had the same problem today. Search panes just won't refresh.

After hours of testing, I noticed that they won't re-draw if you defined columns inside searchPanes property:

searchPanes: {
   viewTotal: true,
   columns: [1, 3]
},

Instead try to define them inside columnsDefs property:

searchPanes: {
   viewTotal: true,
},
columnDefs: [{
   searchPanes: {
      show: true
   },
   targets: [1,3]
}],

I don't know what causes this. Is there an internal bug? Or is my configuration wrong? Anyway, that is the only workaround that worked for me.

I hope it helps. Cheers.

IMPORTANT: This workaround will not work if you try to use search panes with the buttons (inside the pop-up window).

colin

@bakis It appears to be working as expected here: http://live.datatables.net/sotapase/1/edit . Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.

Cheers,

Colin

joseoliveiraborlas

Thank you @bakis!!

darrachequesne

For future readers, it seems that, even if the backend returns the correct data, you need to indicate which columns are affected by the SearchPanes extension on the client side:

• either with columnDefs (as suggested above)

new DataTable('#example', {
    columnDefs: [
        {
            searchPanes: {
                show: true
            },
            targets: [0, 1, 2, 3]
        }
    ],
    searchPanes: {
        cascadePanes: true
    },
    // ...
});

• or in the columns attribute:

new DataTable('#example', {
    columns: [
        {
            data: "someData",
            searchPanes: {
                show: true,
            }
        }
    ],
    searchPanes: {
        cascadePanes: true
    },
    // ...
});

Else, the item counters won't be updated.