button separator?

louking

I'd like to be able to visually separate distinct sets of buttons above the datatable, perhaps with a vertical bar. Is this possible?

I have a vague notion that this might be achievable using https://datatables.net/reference/api/buttons().containers() but I'm not really sure how to make this work.

kthorngren

Does this example help?

Kevin

louking

Maybe. I'm looking for a way to have all the buttons at the top of the table, with the two "types" of buttons separated by a vertical bar. I don't suppose there's any way to create a fake button which is simply a vertical bar? Hmm, maybe some kind of jquery conversion of the "button" after initialization? Or better would be a special button class "button-separator"?

Best for my software architecture if the button creation was via initialization options.

colin

I can't think of a way to add a divider but you could use styling perhaps to create a separation - something like this : http://live.datatables.net/nevabipo/1/edit

Colin

kthorngren

It needs some styling work but maybe this will help:
http://live.datatables.net/ziqahozu/1/edit

Kevin

louking

@kthorngren, yes I was starting to think along those lines. Thanks!

louking

How about something like this? I realize the embedded style would be better handled by class, but it gives an idea, no? Also not sure the best way to get the height to match the other buttons, and it would also be nice to turn off the hover behavior.

See http://live.datatables.net/taqemivo/1/edit

$.fn.dataTable.ext.buttons.separator = {
    text: '',
    attr: {style: 'width: 5px; height: 28px; ' +
            'padding-left: 0px; padding-right: 0px; cursor: auto;'},
    action: function () {
    }
};

louking

Found a solution to my height problem here using 0 width space unicode character: https://stackoverflow.com/a/66584275/799921

So the resulting separator button is as follows. Still unclear if I can easily remove the hover behavior.

$.fn.dataTable.ext.buttons.separator = {
    text: '​',
    attr: {style: 'width: 5px; padding-left: 0px; padding-right: 0px; cursor: auto;'},
    action: function () {
    }
};