Need help converting to new layout from dom.

washuit-iamm

Old (borrowed from https://github.com/DataTables/DataTables/blob/master/media/js/dataTables.bootstrap4.js#L48):

    const BS4DOM = "<'row'<'col-sm-6 col-md-12'<'#buttonContainer'>>>" +
      "<'row'<'col-sm-12'tr>>" +
      "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>";

Is there an easy migration for the above? All of my pages use a helper function like so:

    function AppendButtons(table, buttonGroupSelector) {
      table
        .buttons(buttonGroupSelector, null)
        .container()
        .appendTo('#buttonContainer');

allan

At the moment the layout option doesn't have a way to set an id for a specific div. I'm going to add that for 2.1.

That said, the idea with layout is that you shouldn't need to create a buttons instance separate from the table any more - you do it as part of layout regardless of which styling you are using.

Allan

washuit-iamm

@allan Is there an API for layout yet?

Essentially, I have pages on my site create and append buttons dynamically (usually due to permissions a user might have or not have).

        if (window.policyClient.hasPermission("ReadAudit")) {
            dataTableUtils.appendButtons(table, 'audit');
        }

washuit-iamm

I am having a cart before the horse issue @allan

I am creating buttons with new Buttons(). This requires an initialized table. Some of my buttons require an editor instance. So I have to build all my buttons later long after I can pass layout to my table.

allan

layout can take a function as a positional parameter value, so you could work out the buttons to show in it and return the buttons container. See this example.

The other option, which might be a little less disruptive to your current code is to use such a function to return a div with a specific ID, which you can then append the buttons to with a minimal tweak in appendButtons.

Allan

washuit-iamm

@allan That worked for me. I am thinking more on what you said "you shouldn't need to create a buttons instance separate from the table any more".

Each of my pages creates a few button groups like so:

            new $.fn.dataTable.Buttons(table, {
                name: 'retired',
                buttons: [
                    dataTableInventoryUtils.retireDisplayButton(dataTableUrl)
                ]
            });

            new $.fn.dataTable.Buttons(table, {
                name: 'main',
                buttons: [
                    { name: 'create', extend: "create", editor: editor, formTitle: `Create ${formEntityDisplayName}` },
                    { name: 'delete', extend: "remove", editor: editor, className: 'btn-danger', formTitle: `Delete ${formEntityDisplayName}` },
                    dataTableInventoryUtils.editInventoryButton(editor),
                    dataTableInventoryUtils.duplicateInventoryButton(editor, [
                        'DomainId',
                        'VirtualEnvironmentId',
                        'Location',
                        'ManagedById',
                        'OwnedById',
                        'BillingCode',
                        'Department',
                        'GrantFundNumber',
                        'CustomerBusinessService',
                        'ContactGroupId',
                        'ModelId',
                        'OSLevelId',
                    ]),
                    dataTableInventoryUtils.retireInventoryButton(editor, table, inventoryRoutePart),
                    dataTableInventoryUtils.unretireInventoryButton(editor, table, inventoryRoutePart)
                ]
            });

You can see each page customizes the buttons slightly. dataTableInventoryUtils is just a simple js file that lets me re-use button functionality across all my pages. Each of my pages can be thought of as a little SPA with DT and Editor at its heart.

If I wanted to do this the right way and create my buttons instance with my table, how can I do that?

My UI looks like so:

allan

I don't think what you have is "the wrong way", but I'd be tempted to do something like:

layout: {
  top: [
    { buttons: dataTableInventoryUtils.retireDisplayButton(dataTableUrl) },
    { buttons: dataTableInventoryUtils.editingInventoryButtons(editor) },
    { buttons: dataTableInventoryUtils.duplicateInventoryButton(editor, [

    ] }
  ]
}

And have each resolve to an array of buttons that should be added (or empty if no permission for a button).

Allan