searchBuilder with Bootstrap 5, how can i initialise all buttons with class btn-primary?

sovap

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

By default the buttons from searchBuidler extension are initiliased with class "btn-secondary"
Is there any way how to initialise them with a different class?

I know I can change it afterwards with jquery but that is not an easy solution as a lot of buttons are added to the page later on when the searchBuilder is used...

choc

I forgot whether the following works or not to overwrite it or just append a new class to the original classes:

buttons: [
    {
         extend: "searchBuilder",
         className: "your-class",
    }
]

But a more directly way is:
https://github.com/DataTables/Buttons/blob/0c81c91fe4202a954d57fe1b54cc0fe066056c17/js/buttons.bootstrap5.js#L11

Since I make too many customizations, it would be better for me to remove unwanted classes directly.

sovap

I have tried the following without success.

1) added buttons to the init:

var exec_overview_table = new DataTable('#executions', {

    info: true,
    paging: true,
    pageLength: 10,
    responsive: true,
    select: true,

    buttons: [
        {
         extend: "searchBuilder",
         className: "btn-primary",
        }
    ],

    layout: {
        bottom2Start: {
            searchBuilder: {
                greyscale: true
            }
        }

    },
    
    columns: [
        { data: 'check' },
        { data: 'exec_id' },
        { data: 'project_name' },
        { data: 'exec_name' },
        { data: 'user_id' },
        { data: 'start_time' },
        { data: 'env_name' },
        { data: 'total_tests' },
        { data: 'total_passed' },
        { data: 'total_failed' },
        { data: 'total_skipped' },
        {
            data: 'log',
            render: function (value, type, row) {
                return '<a target="_blank" href="' + value + '">robot log</a>';
            }
        },
    ],
    columnDefs: [
        {
            orderable: false,
            render: DataTable.render.select(),
            targets: 0
        },
        {
            targets: 5,
            render: DataTable.render.datetime('DD-MM-YYYY hh:mm:ss z')
        }
    ],
    select: {
        style: 'os',
        selector: 'td:first-child',
    },
    order: [[1, 'dsc']]
});

2) Added your code from repo to custom js file where i changed the classes and then added the file to html.

Unfortunately its not working for me as you can see in the picture:

choc

You put the code in the wrong place I'm afraid.

It should be put inside the layout.

See: https://live.datatables.net/bohikofo/4/edit?html,js,output

It replaces the default classes with different classes.

Since you haven't provided a reproducible example, I have no idea how you want the search builder to be created, and what css files you're using.
(Please do so in the future, as it is difficult to help based only on description.)

So I only make the example to simply show how to overwrite the classes of the Button that will open the search builder using button initialization way (https://datatables.net/extensions/searchbuilder/examples/initialisation/buttonOptions.html).

Note the CSS conflict:
<link href="https://cdn.datatables.net/buttons/3.2.0/css/buttons.dataTables.css" rel="stylesheet" type="text/css" />

This style and Bootstrap 5 button styles will conflict. Since the search builder window has classes "dt-button-collection dtb-collection-closeable" that is defined in buttons.dataTables.css, you can use the file and remove unwanted dt-button or dt-buttons styling that affects the btn-primary overwrite before.

I also didn't see Example on https://datatables.net/extensions/searchbuilder/examples/ shows how to use button initialization and with Bootstrap 5, but yeah, there will be a CSS conflict.

If you want to change the Search Builder Bootstrap button styles "within" the search builder window, check: https://github.com/DataTables/SearchBuilder/blob/master/src/searchBuilder.bootstrap5.ts
(if you use the cdn, then it is the file: https://cdn.datatables.net/searchbuilder/1.8.1/js/searchBuilder.bootstrap5.js)
and directly replace btn-secondary with the class you want.

Or as I show in the example, use:

DataTable.SearchBuilder.classes.clearAll = 'btn btn-primary dtsb-clearAl';

to change the classes inside the window