Searchpanes in conjunction with cascadePanes and statesave seems to not update

theard

Hi,

I have a problem with searchpanes. When I use this in conjunction with cascadepanes and statesave the panes don't update their content on a page refresh and new ajax data.

When I disable either stateSave or cascadePanes everything works as expected.

this is the script i use for initialization:

var editor;

$(document).ready(function() {
    overlaySpinnerStart(function(){

      var table = $('#DTproducts').DataTable( {
        ajax: {
          url: 'http://portal.example.local/cdn/cache/example_0d20245e7a169b14fcc13a64ae784ddd.JSON?hash=6a72eeac223f2f6bc63043135f45e080',
          cache: true
        },
        deferRender: true,
        columns: [

          { data: "link_button" },{ data: "prodid" },{ data: "model" },{ data: "ean" },{ data: "brand" },{ data: "name" },{ data: "price" },{ data: "tax" },{ data: "cost" },{ data: "active" },{ data: "pricing_method" },{ data: "min_margin_allowed" },
        ],
        dom: '<"show_entries_wrapper"l>frtip',
        lengthMenu: [[10, 25, 50, 100, 250], [10, 25, 50, 100, 250]],
        scrollX: true, // vertical scrolling
        searchPanes:{
          cascadePanes: true
        },
        stateSave: true,
        select: true,
        colReorder: {
          realtime: false
        },
        columnDefs:[
                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: false,
                className: '',
                                targets: [0],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [1],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w200 enableToggle',
                render: $.fn.dataTable.render.ellipsis( 25, false, true),                targets: [2],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w200 enableToggle',
                                targets: [3],
            },

                        {
                searchPanes:{
                    show: true,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [4],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w250 enableToggle',
                render: $.fn.dataTable.render.ellipsis( 35, false, true),                targets: [5],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [6],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [7],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [8],
            },

                        {
                searchPanes:{
                    show: true,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [9],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [10],
            },

                        {
                searchPanes:{
                    show: false,
                },
                visible: true,
                searchable: true,
                orderable: true,
                className: 'left w100 enableToggle',
                                targets: [11],
            },

            
        ],

        initComplete: function() {
          $('#filter-column-tab').append('<div class="clear"></div>');
          table.searchPanes.container().appendTo('#filter-data-tab');
          $('#filter-data-tab').append('<div class="clear"></div>');
          overlaySpinnerStop();
        }
      } );
      new $.fn.dataTable.Buttons( table, {
          name: 'toggle',
          buttons:  [
          { extend: 'columnsToggle',
            columns: '.enableToggle',
          }
        ],
    } );

    table.buttons( 'toggle', null ).container().appendTo(
        '#filter-column-tab'
    );

    });

} );

Is this a bug or am I missing something?

sandy

Hi @theard ,

First, I would make sure that you are using the latest version of the nightly builds as there may be a fix in there. If that doesn't work we will need a test case please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Thanks,
Sandy

theard

Hi @sandy ,

Thanks for your reply. Unfortunately the latest nightly build(19-11-2020) doesn't provide a fix for this.

The page I'm working on is not yet published (and will be behind a login once it is) so I will create a test case.

I'll get back to you asap!

Thanks, Ard

theard

Hi @sandy ,

Here is a working test case: http://live.datatables.net/gezagika/1/edit

Now here if you change the age of Tatyana Fitzpatrick to '20' for example, the searchpanes actually do correct itself at first and the '19' dissapears from the 'age' pane.
But now, if you select 'London' and then deselect 'London' again, you will see that the 'age' pane now has the '19' value back. If you select it, nothing shows up in the table (as it should be, because there is no age with value '19').

If I turn off the stateSave, everything works as expected.

Thanks for your help!
Ard

sandy

Hi @theard ,

Something isn't right there, thanks for pointing it out. I've raised an issue internally (DD-1736 for my reference) and will report back here when there is an update. Probably tomorrow.

Thanks,
Sandy

colin

Thanks for that test case. Yep, I'm seeing that too. I've raised it internally (DD-1737 for my reference) and we'll report back here when there's an update.

Cheers,

Colin

sandy

Oops me and @colin have double reported on this one. I'm going to mark colins as a duplicate internally and use the DD-1736 code from here on.

Thanks,
Sandy

theard

Hahaha, nice to see that you are very active on the forums. Better twice then no reply.

I'll patiently await the update.

Thanks in advance!

sandy

Hi @theard ,

Just managed to squeeze it in before I call it a day! That should be the issue fixed now as you can see at this example. This will be available in the next SearchPanes release which we hope will be in the next few weeks. Until then you can access the fix from the nightly builds.

Thanks,
Sandy

theard

Hi @sandy,

My apologies for the late response, busy week...

Thanks for the fix! I'll implement the nightly build for now.

Cheers!