Answers

• allan Posts: 65,286Questions: 1Answers: 10,822 Site admin

  April 2024

  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 Posts: 136Questions: 57Answers: 2

  April 2024

  @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 Posts: 136Questions: 57Answers: 2

  April 2024 edited April 2024

  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 Posts: 65,286Questions: 1Answers: 10,822 Site admin

  April 2024

  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 Posts: 136Questions: 57Answers: 2

  April 2024

  @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 Posts: 65,286Questions: 1Answers: 10,822 Site admin

  April 2024

  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