searchPanes clearButton not working when using option serverSide: true

pgerundt

I created a test case under
http://live.datatables.net/dujipega/4/edit
Unfortunately, the test case is not working due to CORS restrictions (I could not find the options.json under the subdomain live.datatables.net).

The problem is (when using the option serverSide: true):
When the searchPanes are loaded and an item is selected, the disabled attribute of the clearButton is not removed, so the selection cannot be deselected via the clearButton.

When a character is entered into the search field of the searchPane, the disabled attribute is removed correctly.

I tracked the error down to Line 440 of the nightly build of dataTables.searchPanes.js:

            this.s.dtPane.on('select.dtsp', function () {
                clearTimeout(t0);
                if (_this.s.dt.page.info().serverSide && !_this.s.updating) {
                    if (!_this.s.serverSelecting) {
                        _this.s.serverSelect = _this.s.dtPane.rows({ selected: true }).data().toArray();
                        _this.s.scrollTop = $(_this.s.dtPane.table().node()).parent()[0].scrollTop;
                        _this.s.selectPresent = true;
                        _this.s.dt.draw(false);
                    }
                }
                else {
                    _this.dom.clear.removeClass(_this.classes.disabledButton).removeAttr('disabled');
                    if (!_this.s.updating) {
                        _this.s.selectPresent = true;
                        _this._makeSelection();
                        _this.s.selectPresent = false;
                    }
                }
            });

Shouldn't be the line
_this.dom.clear.removeClass(_this.classes.disabledButton).removeAttr('disabled');
executed in both cases of the if-condition?

P.S.: Same goes for the deselect.dtsp event on line 461.

sandy

Hi @pgerundt ,

Thanks for pointing this out. I've checked locally and at this example and it seems to be working fine...

Could you expand a little on what steps need to be taking to see this error? Otherwise I will need to see some kind of test case to see what is going wrong.

Thanks,
Sandy

pgerundt

Hi Sandy,

the link "this example" in your answer is not working.
To see the error, you just have to enable the serverSide option and provide an ajax url for the data.
The error only occurs in serverSide mode.

sandy

Hi @pgerundt ,

Apologies for the link, meant this one - https://editor.datatables.net/examples/extensions/searchPanes.html

Thanks,
Sandy

pgerundt

Hi Sandy,

(my comment got somehow deleted, so here again):

Steps to reproduce the bug:
- open the link
- select Alexa in the first searchPane
- click on the x button
=> nothing happens, the button is disabled
- enter a into the search field of the first searchPane
- click on the x button again
=> Alexa gets deselected, the button is no longer disabled

From now on you can select Alexa and clear your selection with the x button

Steps to fix:
The line 451
_this.dom.clear.removeClass(_this.classes.disabledButton).removeAttr('disabled');
should be copied into line 448 so it gets called in both if branches.

Same goes for deselect.dtsp:
Duplicate the lines 473 to 475

if (_this.s.dtPane.rows({ selected: true }).data().toArray().length === 0) {
    _this.dom.clear.addClass(_this.classes.disabledButton).attr('disabled', 'true');
}

to line 469.

Greetings,
Pascal

sandy

Hi @pgerundt ,

Apologies, I thought you were meaning the clear all button at the very top right. I can see what you are describing above and something isn't right there. I've raised an issue internally (DD-2062 for my reference) and will report back here when there is an update.

Thanks,
Sandy

sandy

Hi @pgerundt ,

That should be the issue fixed now. 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