How to use change the text to an icon for seachBuilder button

cj1005

Hi,

I'd like to use a font awesome icon rather than the standard text, I set seachBuilder like so:

buttons: [ { extend: 'searchBuilder', titleAttr: 'Search Builder', config: { columns: [ 0,1,2 ], orthogonal: { search: 'filter', display: 'display' }, } ]

I found this page which shows you how to add it using a language settings object: https://datatables.net/extensions/searchbuilder/examples/customisation/buttonText.html

But, it would really help me if I could set the text or icon within the button config section, something like:

buttons: [ { extend: 'searchBuilder', text: '<i class="fas fa-search-alt"></i>', titleAttr: 'Search Builder', config: { columns: [ 0,1,2 ], orthogonal: { search: 'filter', display: 'display' }, } ]

Is this possible, please?

Thanks, Chris

desperado

I realize you want NOT to use language.

But, why doesn't language technique work for you ?
It might help us solve the issue.

The language option also helps with the three possible states of the Search Builder.
https://datatables.net/reference/option/language.searchBuilder.button

See this example using language and the three states with your icon https://jsfiddle.net/gouldner/fjzhngx3/

cj1005

Hi Desperado,

After thinking about it, you are right, I will need the three possible states, so I will need to incorporate the language option.

Thank you for replying & merry Christmas

Chris

sandy

Hi @cj1005 ,

It's not possible to set the text like that as SearchBuilder runs a function to dynamically update the text as the table is filtered. In SearchPanes this is an initialisation option (searchPanes.filterChanged). This allows you to perform custom actions whenever the SearchPanes filter is used.

There is a similar function implemented in SearchBuilder - but for some reason it is not an initialisation option. It should be, so I've raised an issue internally (DD-2412 for my reference) and will report back here when there is an update.

Thanks,
Sandy

cj1005

That was going to be my next question, so thank you Sandy

sandy

Hi @cj1005 ,

Just to confirm, searchBuilder.filterChanged was actually an initialisation option - I had just forgotten to document it! Apologies for this, the docs will be included on the website when SearchBuilder is next released which we hope will be in the next few weeks.

The docs are currently in the github repo, but the behaviour is the same as searchPanes.filterChanged.

Thanks,
Sandy

cj1005

Hi Desperado\Sandy,

I'm using the language object settings for the searchBuilder button caption, which works well, thanks to Desperado.

So, I'd like to use the same for searchPanes, but I get the following console.error: "Uncaught TypeError: Cannot read properties of undefined (reading 'replace')"

This is my code:

   language: {
       searchPanes: {
           button: {
               0: '<i class="fas fa-filter"></i>',
               _: '<i class="fas fa-filter" style="color: #f44336;"></i> (%d)'
            }
        }
    },

I also tried the above without the (%d) but I get the same error.

Could you advise, please?

Thanks, Chris
ps. I can give you access to my web app if required, just pm me.

cj1005

Just to add to the above, I tried changing the above code to use 'title: {' rather than 'button: {' and I get the same error message.

Also, I'm not using searchPanes via the dom, I add it as a button using:

buttons: [ extend: 'searchPanes' etc.....

Thanks, Chris

sandy

Hi @cj1005 ,

Can you tell me what line and file this is occurring on? Access to your page may be easiest!

Thanks,
Sandy

cj1005

Hi Sandy, I have pm'd you, about accessing my web app. Thanks, Chris

cj1005

Thanks to Sandy for all her help. Below is the working code:

language: {
    searchPanes: { 
         collapse: {
               0: '<i class="fas fa-filter"></i>',
               _: '<i class="fas fa-filter" style="color: #f44336;"></i> (%d)'
         }
    }
}

Easy when you know how