button separator?

button separator?

loukinglouking Posts: 259Questions: 52Answers: 0

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.

This question has accepted answers - jump to:

Answers

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

    Does this example help?

    Kevin

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

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

    Kevin

  • loukinglouking Posts: 259Questions: 52Answers: 0

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

  • loukinglouking Posts: 259Questions: 52Answers: 0
    edited March 2021

    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 () {
        }
    };
    
  • loukinglouking Posts: 259Questions: 52Answers: 0

    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 () {
        }
    };
    
    
This discussion has been closed.