Deselecting filter (by value) in searchPanes

Deselecting filter (by value) in searchPanes

hrasthrast Posts: 17Questions: 5Answers: 0

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"})
};

Answers

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @hrast ,

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

    Thanks,
    Sandy

  • hrasthrast Posts: 17Questions: 5Answers: 0

    I can't post anything, why is that? :/

  • hrasthrast Posts: 17Questions: 5Answers: 0

    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);
                }
                
                
            });
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • hrasthrast Posts: 17Questions: 5Answers: 0

    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.

This discussion has been closed.