Buttons with specific class is not displayed

marcpirat

I use datatable with buttons plugings and bootstrap style.

With this code

    var url = '/i18n/' + '[(${#authentication.getPrincipal().getLang()})]' + '.json';
    var productTypesTable = $('#productTypesTable').DataTable({
                            responsive: {
                                details: {
                                    display: $.fn.dataTable.Responsive.display.childRowImmediate,
                                    type: ''
                                }
                            },
                            "language": {
                                "url" :  url
                            },
                            dom: 'Bfrtip',
                            buttons: {
                                dom: {
                                  button: {
                                    tag: 'button',
                                    className: ''
                                  }
                                },
                                buttons: [
                                    {
                                        extend: 'copy',
                                        className: 'btn btn-primary',
                                        text: '[(#{productType.new})]', //should come from thymeleaf
                                        action: function ( e, dt, node, config ) {
                                             $("#productTypesFragment").load("/template/new/producttypes");
                                        }
                                    }
                                ]
                            },
                            "bLengthChange": false, //hide 'show entries dropdown
                            'pagingType': 'simple_numbers'
                        });

Buttons is not displayed

colin

Hi @marcpirat ,

That's normally because you haven't included the JS and CSS files. Take a look at the example here - on the bottom of the page you'll see tabs for Javascript and CSS, make sure you have the listed files (your versions may vary) present in your code.

Cheers,

Colin

allan

A little meta, but:

Hurrah - this is discussion 50'000 in the forum! .

marcpirat

in fact I search my button only have this class 'btn btn-primary' tried to use extend, is there any way?

because if i need to add another css, js only to extend to be able to use another class.. it's soso

colin

Hi @marcpirat ,

This page here has an example of the extend for copy.

But yes, you need to have that extra JS/CSS, that's where the code lies.

Cheers,

Colin

marcpirat

will be more logic to modify directly buttons.bootstrap4.min.js instead to add css, js need to extend something i will not use

colin

That's an option, but modifying a packaged file means that any upgrade path would be complicated.