button not-work selected

Massimo1974

sorry guys if I remove the class to take the class I entered in className I lose the selected functionality but if I do not remove it it does not take my class how can I solve .... ie have my class and keep the action selected

                    {
                        extend: 'selected',
                        className: 'btn btn-labeled btn-primary btn-sm',
                        text: '<span class="btn-label"><span class="fa fa-briefcase"></span></span>  Count selected rows',
                        action: function ( e, dt, button, config ) {
                            alert( dt.rows( { selected: true } ).indexes().length +' row(s) selected' );
                        },
                        init: function(api, node, config) {$(node).removeClass('dt-button')}
                    },

colin

Hi @Massimo1974 ,

I'm not following, sorry. Please can you provide a test case demonstrating the problem, and explain what you would expect/want it to do. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Massimo1974

You have this example....
https://jsfiddle.net/3sbwya/jwc0azb9/
if you change the button code with this one

        buttons: [{
            extend: "selected", 
      className: 'btn btn-labeled btn-primary btn-sm',
      text: '<span class="btn-label"><span class="fa fa-briefcase"></span></span>  Remove contact(s)',
            action: function ( e, dt, node, config ) {
                var selectedRows = dt.rows(".selected");
                alert(selectedRows.data().length + " rows selected");               
                selectedRows.remove().draw();
            },
      init: function(api, node, config) {$(node).removeClass('dt-button')},
      
        }]

now see how the button works without any record being selected.
I need to assign my class to the button without removing the selected function
thanks

allan

You are overriding the init function for the selected button which is what adds the select/deselect behaviour for the button.

You could add:

$.fn.dataTable.ext.buttons.selected.init.call( this, api, node, config );

into your own init function which will call the selected one. But I'm not really clear on why you need to remove the dt-button class?

Allan

Massimo1974

if I don't remove the 'dt-button' class I don't get the bootstrap class 'btn btn-labeled btn-primary btn-sm' if you have another solution to integrate it you will grumble

allan

It looks like you are using the DataTables styling rather than the Bootstrap integration styling for DataTables, which is why you are needing to mess around with the classes. Do to the download builder and select "Bootstrap 4" as the styling and then whatever other software you need.

Allan