Change custom text searchBuilder background

Change custom text searchBuilder background

sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

Hello Team,
As per below example I changed my searchBuilder text but filter count not appear in custom text.
https://datatables.net/extensions/searchbuilder/examples/customisation/buttonText.html

I need to change the counter and color back ground when filter applied as per below example for custom text of searchbuilder.

http://live.datatables.net/qipuyoyu/2/edit

This question has an accepted answers - jump to answer

Answers

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736

    Maybe I'm not understanding the issue but the filter count seems to work in your test case. See the screenshot:

    Kevin

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

    No it is not working. This is old example I saw you. This is not custom text button. If you add the custom text for button then this color will not work

    language: {
            searchBuilder: {
                button: 'Filters',
                add: '<i class="fa-solid fa-filter"></i>Filters',
                title: {
                    0:'Filters',
                    _: 'Filters (%d)'
                },
                delete: '<i class="fa-solid fa-delete-left" style="color:DarkRed;Height:15px"></i>',
                clearAll:'<i class="fa-solid fa-filter-circle-xmark" style="color:DarkRed;Height:15px"></i>Reset'
    
            }
        },
    

    This is button code

    {
    extend: 'searchBuilder',
    className:'Filtre',
    config: {
    filterChanged: function (count) {
    if (count) {

                            $('.Filtre').text(table.i18n('searchBuilder.collapse', { 0: 'Filters', _: 'Filters (%d)' }, count));
                            $('button.dt-button.Filtre').css('background-color', "green");
                        } else {
                            $('.Filtre').text(table.i18n('searchBuilder.collapse', { 0: 'Filters', _: 'Filters (%d)' }, count));
                        }
                    }
                }
            },
    
  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,736
    Answer ✓

    Please update the test with your code to show the issues you are having so we can help debug.

    Kevin

  • sarooptrivedisarooptrivedi Posts: 45Questions: 15Answers: 2

    I figure out with issue. Above code is working as expected. I face the issue because in my site.css class is override the datatables css class.

    Thank you for looking

Sign In or Register to comment.