searchPanes cascadePanes with serverSide cascades only after manual refresh

randomusername

Hello,

See table config below:

$(document).ready(function()
{
  /* non debug url */
  url = '/'

  count_accept = 0;
  count_reject = 0;
  var thetable = $('#thetable').DataTable({
    "dom": 'Pfrtip',
    "order": [[0, 'desc']],
    "processing": true,
    "serverSide": true,
    "searchPanes": {
      "cascadePanes": true
    },
    "ajax": {
      "url": url + "get",
      "type": "POST",
      "dataType": "json",
      "dataSrc": "data"
    },
    columns: [
      { "title": "Date", "data": "_authdate" },
      { "title": "Result", "data": "_reply" },
      { "title": "Username", "data": "_username" },
      { "title": "Client MAC", "data": "_callingstationid" },
      //{ "title": "Switch MAC", "data": 5 },
      { "title": "SSID", "data": "_calledstationssid" },
      { "title": "Switch Port", "data": "_nasportid" },
      { "title": "Switch / AP", "data": "_nasidentifier" },
      { "title": "Connection", "data": "_nasporttype" },
      { "title": "Switch / AP IP", "data": "_nasipaddress" }
    ]
  });

Search panes function works great, in that I can select filters and have the table update. The backend is implemented in python/flask, similar to: https://gist.github.com/LexPanov/8cb89c6515946fa0def2147656ed9ed9

However, the panes do not cascade. I have a refresh button that does the following:

  /* refresh button */
  $("#refresh_button").bind("click", function()
  {
    thetable.ajax.reload();
    thetable.searchPanes.rebuildPane(undefined, true);
  });

When clicking the button, the search panes are cascaded and each item counter is updated correctly, reflecting the selected filters.

Is there something I should be doing (either client or server side), to ensure that the panes cascade and update their values correctly, when a filter is selected?

Apologies I am not able to provide a test case in this instance, as I was unsure how to replicate the server side facility with search panes, in order to effectively demonstrate the problem.

Thanks in advance

randomusername

The DT debugger shows that I am using the latest DT and SP.

colin

The brains for this is on the server-side script, rather than the client libraries. These example is working as expected, so it would suggest something in your scripts. This blog post may help, as it discusses how to use our Editor server-side scripts. If not, please let us know and we can delve deeper.

Colin

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 (like in the example 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.