Buttons styling - using bordered containers for visual grouping

tangerine

In testing, this

    oTable.buttons(0, null).container().insertAfter("table");       // example only
    oTable.buttons(1, null).container().insertAfter("h1");           // example only

seems to provide what I'm going to need. The point being that I could then display "sets" of buttons in bordered containers pre-defined in my HTML. This would significantly improve readability where several buttons are in play.
However, I would have expected to use something like this

var my_CRUD_buttons = new $.fn.dataTable.Buttons(oTable, {
....
var my_export_buttons = new $.fn.dataTable.Buttons(oTable, {
....

i.e. named instances rather than the numeric ones in the first example.
Is my first example the correct way to do this?

tangerine

Further inspection of the docs suggests my first example shouldn't work anyway.

If my intention is clear enough from the above, does anyone know how to achieve this?
I'm not getting a good enough grip from the documentation.

allan

Is my first example the correct way to do this?

Yes. The return from new $.fn.dataTable.Buttons isn't really used at all. The Buttons instances can be manipulated through the DataTables API.

This example shows two different button groups shown on the page. One of them is added by dom, but, you could equally add it via another Buttons constructor.

You can also give button groups a name as shown here which can make it easier to select them.

Does that help?

Allan

tangerine

Thank you Allan. I can work my way through this now, with your examples.