Deselecting filter (by value) in searchPanes

hrast

Hello!

I have managed to get list of selected filters from searchPanes and put it in tags to show to user which are currently active.
When I select some filter in searchPanes or deselect it, tag with newly selected filter appears on page or is removed from the page. I implemented tags with badges from Bootstrap 4.

Next thing I wanted to implement was to have a small close button on every badge, so that when is clicked:
1. Element is removed from the page
2. Filter with that name/value is deselected on searchPanes

I have finished with number 1, but number 2 is giving me some problems.
Is there any way to deselect filter by value from searchPanes? Something like this maybe (?):

$('.dtsp-searchPane table:visible').each(function (t) {
                $(this).DataTable().rows({ selected: true }).data({value: "my-value"})
};

sandy

Hi @hrast ,

You should be able to use the row().deselect() method to do this with your current setup.

Thanks,
Sandy

hrast

I can't post anything, why is that?

hrast

I can't get it to work. In myFunc I am removing the element and trying to deselect it by it's value (item).

        var myFunc = function () {
            item = this.parentElement.innerText.substring(0, this.parentElement.innerText.length - 2);

            this.parentElement.remove();

            $("#panes").trigger('click');
            $('.dtsp-searchPane table:visible').each(function (t) {
                array = $(this).DataTable().row({ value: item}).deselect();

            });
            $("#panes").trigger('click');
            
        }

        table.on('search.dt', function () {
            
            var counter = 0;
            listaFilteri = []
            
            $('.dtsp-searchPane table:visible').each(function (t) {
                array = $(this).DataTable().rows({ selected: true }).data().toArray()
                
                if (array.length < 1) {
                    counter++;
                }
                for (i = 0; i < array.length; i++) {
                    
                    if (!(listaFilteri.includes(array[i].display))) {
                        listaFilteri.push(array[i].display);
                        
                    }
                }
            });
            
            $("#filteri").empty();
            
            for (elem in listaFilteri) {
                
                $("#filteri").append("<div class='badge badge-pill badge-primary'> " + listaFilteri[elem] + " <a href='#' class='badge badge-light'>x</span></div>");
            }


            var elements = document.getElementsByClassName('badge badge-light');
            for (var i = 0; i < elements.length; i++) {
                elements[i].addEventListener('click', myFunc, false);
            }
            
            
        });

colin

It went into the spam filter, I'm afraid. I've just unblocked those messages.

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. 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.

Cheers,

Colin

hrast

If anyone else is having the same problem, I solved it like this:

                $('.dtsp-searchPane table:visible').each(function (t) {
                    var table = $(this).DataTable();
                    table
                        .rows(function (idx, data, node) {
                            return data.display === item ? true : false;
                        })
                        .deselect();
                    
                });

Thanks for helping me! Appreciate it.