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

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

cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

This question has an accepted answers - jump to answer

Answers

  • desperadodesperado Posts: 159Questions: 33Answers: 4
    Answer ✓

    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/

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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 :smile:

    Chris

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

  • sandysandy Posts: 913Questions: 0Answers: 236

    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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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.

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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

  • sandysandy Posts: 913Questions: 0Answers: 236

    Hi @cj1005 ,

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

    Thanks,
    Sandy

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

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

  • cj1005cj1005 Posts: 142Questions: 45Answers: 1

    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 :p

Sign In or Register to comment.