Searchbuilder change button background color AND text when filter is active

Searchbuilder change button background color AND text when filter is active

ECEGROUPEECEGROUPE Posts: 71Questions: 25Answers: 1

What i want to do :

  1. Change the background-color of searchbuilder button when a filter is active ( that work)

  2. Change the display text on the buttom when a filter is active (doesn't work)

Exemple : http://live.datatables.net/jutopefa/1/edit

I'm using this documentation : https://datatables.net/reference/option/searchBuilder.filterChanged#Example

What i get :
Expected :

Can you help me pls, how is it suppose to work ?

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    There were two problems:
    1. this can't be used (I'll update the example)
    2. the button didn't have the class (again, the example wasn't clear so I'll updated it)

    This is it working - hopefully that'll do the trick,

    Colin

  • ECEGROUPEECEGROUPE Posts: 71Questions: 25Answers: 1

    Thank colin,

    this doesn't work, i think it's because i m using the 'new' initilisation (i have multiple button group so i need it)

    Case Exemple : http://live.datatables.net/qipuyoyu/1/edit
    if i set
    button.active { background-color:green !important; }
    the background color change work (but doesn't reset when no filter active)

    the text change never work.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    You need !important on the CSS class for the colour, and you've change the class on the button now to be "Filtre" - see updated example here: http://live.datatables.net/qipuyoyu/2/edit

    Colin

  • ECEGROUPEECEGROUPE Posts: 71Questions: 25Answers: 1

    Thank, your exemple work BUT when i delete the filtre, the text stay "Advanced Filter (1)", it doesn't change to the text when none filter is active. Same for the color.

    How to fix this pls ?

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    The code is only triggering when count is not zero - you'll need to add some logic in there for when the count is 0, and remove the class and change the string, something like this:

                    filterChanged: function(count) {
                        if (count) {
                            $('button.dt-button.Filtre').addClass('active');
                        } else {
                            $('button.dt-button.Filtre').removeClass('active');
    
                        }
                        $('.Filtre').text(table.i18n('searchBuilder.collapse', {
                            0: 'AdvancedFilter',
                            _: 'Advancedfilter (%d)'
                        }, count));
                    },
    

    Colin

Sign In or Register to comment.