Positioning of Paging, Length Changing, and Information controls in DataTables.net

I want to position Paging, Length Changing, and Information controls like below:

and have the code below:

 "dom": '<"top"f>rt<"bottom"pli>'

However, I am getting this layout instead, which is not what I want:

Any idea?

Update

The Information control needs to align right, Length Changing control sits next to Informtion control, Paging control sits next to Length Changing control. Please see the updated photo above.

You can use the built-in dom option - but there is no avoiding the need for some additional css.

Here is one way - somewhat basic, but shows the approach:

"dom": '<"my-wrapper"<"my-inner1"p><"my-inner1"l><"my-inner2"i>><t>'

The three CSS classes used by the above configuration are:

  <style>
    .my-wrapper {
      width: 100%;
      margin: 0 auto;
    }
    .my-inner1 {
      margin: 0 20px;
      display: inline-block;
      vertical-align: middle;
    }
    .my-inner2 {
      margin: 0 50px;
      display: inline-block;
      vertical-align: top;
    }
  </style>

The approach is to wrap each of the 3 separate display elements in its own <div> with a custom class - and then have all of those wrapped in another <div>.

The table is in a separate <div> at the end.

This is NOT pixel-perfect, by any means. You can probably get much more fine-grained control if you use a CSS flexbox or grid, instead. But the approach would be the same (outer and inner divs).

For my vanilla DataTables test (i.e. no other CSS frameworks such as Bootstrap), and only the standard CSS (as used by the DataTables web site itself, for its examples), the above looks like this:

If you have different styles on the page, your mileage may vary.

---

Update - based on comments

If you want to move everything to the right of the window/viewport, then make these changes:

For the dom use this:

"dom": '<"my-wrapper"<"my-inner1"i><"my-inner2"l><"my-inner3"p>><t>'

For the custom CSS use this:

  <style>
    .my-wrapper {
      width: 100%;
      margin: 0 auto;
    }
    .my-inner1 {
      margin: 0 20px;
      display: block;
      float: right;
    }
    .my-inner2 {
      margin: 10px 20px 0 20px;
      display: block;
      float: right;
    }
    .my-inner3 {
      margin: 0 20px;
      display: block;
      float: right;
    }
  </style>

This has the advantage that you can adjust the relative heights of each control independently. So, for example, the page length selector has been nudged downwards by 10px to better align it vertically with the other 2 controls.

Here is the right-hand side of the page/viewport, as a result of these changes:

Note that the order of controls in the dom initializer is reversed!

If you want the controls to all be closer together horizontally, then change the 20px margins to be smaller numbers (e.g. 5px or whatever looks OK for your needs).