Need help converting to new layout from dom.

Need help converting to new layout from dom.

washuit-iammwashuit-iamm Posts: 133Questions: 55Answers: 2

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');

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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-iammwashuit-iamm Posts: 133Questions: 55Answers: 2

    @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-iammwashuit-iamm Posts: 133Questions: 55Answers: 2
    edited April 23

    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.

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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-iammwashuit-iamm Posts: 133Questions: 55Answers: 2

    @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:

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    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

Sign In or Register to comment.