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

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

javascript jquery datatables

Javascript DataTables.net中分页、长度更改和信息控件的定位,javascript,jquery,datatables,jquery-datatables-editor,Javascript,Jquery,Datatables,Jquery Datatables Editor,我想定位分页、长度更改和信息控件，如下所示：并具有以下代码： "dom": '<"top"f>rt<"bottom"pli>' “dom”：“rt” 但是，我得到的是这个布局，这不是我想要的：有什么想法吗更新信息控件需要向右对齐，长度更改控件位于信息控件旁边，分页控件位于长度更改控件旁边。请参阅上面更新的照片。您可以使用内置的dom选项，但无需避免需要一些额外的css 这里有一种方法——有些基

我想定位分页、长度更改和信息控件，如下所示：

并具有以下代码：

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

“dom”：“rt”

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

有什么想法吗

更新

信息控件需要向右对齐，长度更改控件位于信息控件旁边，分页控件位于长度更改控件旁边。

请参阅上面更新的照片。

您可以使用内置的

dom

选项，但无需避免需要一些额外的css

这里有一种方法——有些基本，但展示了该方法：

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

对于自定义CSS，请使用以下命令：

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

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


.我的包装纸{
宽度：100%；
保证金：0自动；
}
.my-1{
利润率：0.20px；
显示：块；
浮动：对；
}
.my-inner2{
利润率：10px 20px 0 20px；
显示：块；
浮动：对；
}
.my-inner3{
利润率：0.20px；
显示：块；
浮动：对；
}

这样做的优点是可以独立调整每个控件的相对高度。例如，页面长度选择器向下移动了10px，以便更好地与其他2个控件垂直对齐

以下是页面/视口的右侧，这是这些更改的结果：

请注意，

dom

初始值设定项中控件的顺序是相反的

如果您希望所有控件在水平方向上靠得更近，则将

20px

边距更改为更小的数字（例如

5px

或适合您需要的任何数字）。