如何在semanticui中对齐pageLength、导出按钮和搜索栏？

Question

我真的不太熟悉JS和CSS，所以我很难弄清楚如何才能实现下图中我的数据表的外观：

​

我主要想将行分成三列，宽度为4-8-4，以适应页面长度、导出按钮和搜索栏。

我从this example上模仿了我的DataTable。唯一的区别是我删除了javascript中的lengthChange: false。我试着尝试使用dom选项，但我在这方面一无所获。

对于同样的问题，我也从stackoverflow找到了一个解决方案，但它使用的是bootstrap。我不知道如何为semanticui修改它。

谢谢!

Answer 1

尝试使用以下dom选项：

dom:
  "<'ui grid'"+
     "<'row'"+
        "<'four wide column'l>"+
        "<'center aligned eight wide column'B>"+
        "<'right aligned four wide column'f>"+
     ">"+
     "<'row dt-table'"+
        "<'sixteen wide column'tr>"+
     ">"+
     "<'row'"+
        "<'seven wide column'i>"+
        "<'right aligned nine wide column'p>"+
     ">"+
  ">",

在您的示例中，请不要使用前面提到的example中的代码：

table.buttons().container()
    .appendTo( $('div.eight.column:eq(0)', table.table().container()) );