searchPanes clearButton not working when using option serverSide: true

searchPanes clearButton not working when using option serverSide: true

pgerundtpgerundt Posts: 90Questions: 13Answers: 2

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.

This question has an accepted answers - jump to answer

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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.

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @pgerundt ,

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

    Thanks,
    Sandy

  • pgerundtpgerundt Posts: 90Questions: 13Answers: 2

    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

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • sandysandy Posts: 913Questions: 0Answers: 236
    Answer ✓

    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

Sign In or Register to comment.