Auto deselect entries with counter at zero | Add counter in render function

MickMan

Link to test case: https://datatables.net/extensions/searchpanes/examples/initialisation/cascadePanes.html
Error messages shown: None
Description of problem:
HI,

I don't know if there is a solution for this, but I would like the entries with the counter at zero to be automatically deselected and the panes to be redrawn.

In the example I linked above, if I select New York and San Francisco together (multiple selection) and then select Customer Support I would like San Francisco to be deselected and the pane to only show New York selected (just as if San Francisco were clicked again to deselect it).

I tried to fix the problem for hours, but to no avail.
I found various discussions on how to select a row in panes, but I don't know how to point the counter to create an if condition. I don't even know if it's the most suitable method.

Another small "problem":
I use this config with a very simple custom render function:

searchPanes: {
    viewTotal: true,
  layout: 'columns-1',
   columns: [0,1,17],
   initCollapsed: true,
   orderable: false,
   cascadePanes: true,
  dtOpts: {
select:{
style: 'multi'
},
    columnDefs: [{
      targets: 0,
      render: function(data, type) {
        if (data === null) {
          return type === 'display' ? 'none' : data;
        } else {
          return type === 'display' ? '' + data : data;
      }
      },
    }],
  },
},

How can I include the counter of found entries as in the default configuration?
Tried everything but the right code. ^_^'

I'm using Datatables 1.10 and SearchPanes 2.2.0 with Foundation.

Thank you very much in advance to anyone who wants to help me.

allan

Hi,

Thanks for your question - however, I'm afraid there is no solution for that at the moment. It would probably require a fair bit of work in SearchPanes to allow for that (which in fairness, SP does need a bit of an overhaul!).

Allan

MickMan

Thanks for the quick response Allan. Should have asked before spending hours trying to solve it. XD

Even no way to add the counter to the custom render function?

MickMan

Anyway i thought about this:

if (secondary_badge.text="0" && its closest.('tr') has class selected {
deselect it and redraw pane
}

With proper code, of course ^_^'

MickMan

@allan fixed it!

$('#example').on( 'draw.dt', function () {
  var pane0rows = $('#DataTables_Table_0 tr.selected').length;
  if ( pane0rows > 0 ) {
    $( "span.dtsp-pill" ).each(function( index ) {
        if ($(this).text() == "0") {
          $(this).closest("td").click();
        }
    });
  });
});

This is for the first pane only (#DataTables_Table_0) and need to be replicated for every pane.

Since i made a lot of edits to the css i don't have the span.dtsp-pill selector, but span.badge.secondary instead. Should works on any count container anyway.

Hope this is useful in some way. Let me know if it doesn't works for you and needs more info on my configuration.

MickMan

Ok so the code above could be buggy sometimes, so i solved by changing a selector excluding the "current" pane.

$('#example').on( 'draw.dt', function () {
  var pane0rows = $('#DataTables_Table_0 tr.selected').length;
  if ( pane0rows > 0 ) {
    $( "table:not(#DataTables_Table_0) span.dtsp-pill" ).each(function( index ) {
        if ($(this).text() == "0") {
          $(this).closest("td").click();
        }
    });
  });
});

This way it works like a charm for me.

Also sorry if i called this a fix.
It's clearly not (triggering a click is like cheating), but it's a workaround, nonetheless.

allan

A workaround that works is perfect - nice one! I didn't think that should so readily be done

Allan

MickMan

Actually it's even easier.
I thought that the bugs i was experiencing were due to the selector (so i added a :not to exclude the searchpanes table in use), but turned out that was a "timing" problem (maybe because i'm using ajax to retrieve data?).

So i just tried with a timeout function and it works good with just few lines for every pane. No need to replicates for each pane!

$('#webapp').on( 'draw.dt', function () {
  setTimeout(function() {
    $( "span.dtsp-pill" ).each(function( index ) {
      if ($(this).text() == "0") {
        $(this).closest("td").click();
      }
    });
  }, 100);
});

Sorry for being spammy...

allan

Not at all - it is interesting to see something that I didn't think it would be possible to add without a significant amount of changing the internals of SearchPanes being done!

Allan