DataTables.net 中分页、长度更改和信息控件的定位

Question

我想像下面这样放置分页、长度更改和信息控件：

并具有以下代码：

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

但是，我得到的是这个布局，这不是我想要的：

有什么想法吗？

更新

Information 控件需要右对齐，Length Changing 控件位于 Informtion 控件旁边，Paging 控件位于 Length Changing 控件旁边。请查看上面更新的照片。

Answer 1

您可以使用 built-in dom 选项 - 但不可避免地需要一些额外的 css.

这是一种方法 - 有点基础，但展示了方法：

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

上面配置使用的三个CSS class是：

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

方法是用自定义 class 将 3 个单独的显示元素分别包装在自己的 <div> 中 - 然后将所有这些元素包装在另一个 <div> 中。

table在单独的<div>末尾。

无论如何，这都不是 pixel-perfect。如果您改用 CSS flexbox 或网格，您可能会获得更多 fine-grained 控制。但方法是相同的（外部和内部 div）。

对于我的普通 DataTables 测试（即没有其他 CSS 框架，例如 Bootstrap），只有标准 CSS（由 DataTables 网站本身使用，因为它示例），上面看起来像这样：

如果您在页面上有不同的样式，您的里程可能会有所不同。

更新 - 基于评论

如果要将所有内容移至 window/viewport 右侧，请进行以下更改：

对于 dom 使用这个：

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

对于自定义 CSS 使用此：

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

这样的好处是可以独立调整每个控件的相对高度。因此，例如，页面长度选择器已向下微调 10 像素，以更好地使其与其他 2 个控件垂直对齐。

这是 page/viewport 的 right-hand 一侧，作为这些更改的结果：

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

如果您希望所有控件在水平方向上靠得更近，请将 20px 边距更改为更小的数字（例如 5px 或任何看起来适合您需要的值）。

DataTables.net 中分页、长度更改和信息控件的定位

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

javascript

jquery

datatables

jquery-datatables-editor