javascript - 如何在语义 ui 数据表中对齐页面长度、导出按钮和搜索栏？

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()) );