分页，长度更改和信息控件在DataTables.net中的位置 [英] Positioning of Paging, Length Changing, and Information controls in DataTables.net

问题描述

我要定位分页"，长度更改"和信息"控件，如下所示:

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

，并显示以下代码:

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

但是，我得到的是这种布局，这不是我想要的:

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

有什么主意吗?

更新

信息控件需要右对齐，长度更改"控件位于信息"控件旁边，分页"控件位于长度更改"控件旁边. 请在上方查看更新的照片.

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.

推荐答案

您可以使用内置的dom选项-但是无法避免需要一些其他的CSS.

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

以上配置使用的三个CSS类是:

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>

方法是使用自定义类将3个单独的显示元素分别包装在其自己的<div>中，然后将所有显示元素包装在另一个<div>中.

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>.

该表的末尾位于单独的<div>中.

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

无论如何，这都不是完美的像素.如果使用CSS flexbox或网格，则可能会获得更多细粒度的控件.但是方法是一样的(外部和内部div).

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).

对于我的原始DataTables测试(即没有其他CSS框架，如Bootstrap)，只有标准CSS(例如，由DataTables网站本身使用的CSS)，上面看起来像这样:

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.

更新-基于评论

如果要将所有内容移至窗口/视口的右侧，请进行以下更改:

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

对于dom，请使用此:

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

对于自定义CSS，请使用以下代码:

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>

这样做的好处是您可以独立调整每个控件的相对高度.因此，例如，页面长度选择器向下微调了10px，以使其与其他2个控件垂直对齐.

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:

请注意，dom初始化程序中控件的顺序是相反的！

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

如果您希望控件在水平方向上都靠得更近，则可以将20px页边距更改为较小的数字(例如5px或满足您需要的任何内容).

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).

这篇关于分页，长度更改和信息控件在DataTables.net中的位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！