SearchPanes and nested tables: stateSave breaks

pgerundt

We ran into a lot of issues when using SearchPanes on nested tables:

http://live.datatables.net/wuzajiva/17/edit

• When setting stateSave to true on the inner table(s), the inner tables return No matching records found.
• Sometimes the filter settings of the outer table are applied to the inner table(s).
• If there are no results for the inner table(s) with the filter setting of the outer table, the filter settings of the outer table are unset.

Even without dynamic creation of the searchPanes filters, there is some weird behaviour:

http://live.datatables.net/wuzajiva/19/edit

• Run test case and select filter "First name" = "Alina" and close the filter again. => Outer table only shows one entry
• Open inner table with "+" button; sometimes only one entry (Alina) is shown, sometimes we get "No matching records found."
• Reload example. => Filter of outer table is unset.

Greetings,

Pascal

allan

Hi Pascal,

Thanks for the test cases. I've committed a change to SearchPanes which I think will solve this. This is your second test case (which boils it down nicely) with the nightly of SearchPanes.

Let me know how you get on with it.

Allan

pgerundt

Hi @allan,

this works fine for "classic" stateSave, but we still have an issue when using stateSaveCallback and stateLoadCallback. I will provide a test case.

First of all, npm cannot compile the nightly SearchPanes Bootstrap file
https://nightly.datatables.net/searchpanes/js/searchPanes.bootstrap4.js
because of the camel casing in line 9 and line 33
(datatables.net-searchPanes should be datatables.net-searchpanes)

pgerundt

Hi @allan ,

finally, we have a test case:
http://live.datatables.net/wuzajiva/23/edit

To sum it up:
SearchPanes 2.0.2: filters are restored by stateLoadCallback, but the button text is not updated and the filter of the outer table is applied to the inner table
SearchPanes nightly: filters are not restored by stateLoadCallback, button text and filters work, but opening the inner filters results in a JS error

Does this help?

Cheers,
Pascal

allan

Sorry about that and thanks for letting me know. It is fixed now (you may need to reload your cache).

Allan

pgerundt

Hi @allan ,

here is a new minimal test case (without nested tables):
http://live.datatables.net/wuzajiva/27/edit

with 2.0.2: filter is applied after reload, but filter item is not selected; button text is not set

with nightly: filter is not applied after reload; button text is not set

pgerundt

Workaround (or maybe best practice?):

stringify the whole data, set content type to application/json and use the request body in the serverside script

    stateSaveCallback: function(settings, data) {
      jQuery.ajax({
        type: 'POST',
        url: '[URL]',
        dataType: 'json',
        contentType: 'application/json',
        data: JSON.stringify({
          data: data
        })
      });
    },

Working non-nested example:
http://live.datatables.net/wuzajiva/34/edit

For nested tables, this doesn't work with 2.0.2:
http://live.datatables.net/wuzajiva/36/edit
(the outer filter is applied to the inner table, inner filter is not saved)

Using the nightly build:
http://live.datatables.net/wuzajiva/38/edit
(the filters are applied correctly, but the filters are not saved)

allan

Hi Pascal,

Sorry - do you mean that everything works with the nightly when using the JSON.stringify() data submission?

Allan

pgerundt

Hi @allan ,

there is a bug left with nested tables. Just play around with the two test cases.

Test case with 2.0.2:
http://live.datatables.net/wuzajiva/36/edit
- you can select an outer filter which is applied to the outer table
- you can select an inner filter which is applied to the inner table
- sometimes the inner table shows no records, opening filter makes them appear
- after reload, only the outer filter was stored and is reapplied

Test case with nightly:
http://live.datatables.net/wuzajiva/38/edit
- you can select an outer filter which is applied to the outer table
- you can select an inner filter which is applied to the inner table
- after reload, the outer filter was stored (filter item is still selected), but filter is only applied to the outer table after the SearchPanes button is pressed
- after reload, the inner filter was stored (filter item is still selected). but filter is only applied to the inner table after the SearchPanes button is pressed

Note: To make sure that no one else is messing with your saved data, change the id in stateSaveCallback() and stateLoadCallback().