如何重新排列 DataTables 控件

Question

你好，我想重新排列数据表元素的位置，还想添加一个按钮

我尝试了以下代码

  $('#tblLocations').DataTable({
            scrollY: '45vh',
            targets: 'no-sort',
            bSort: true,
            order: [],
            columnDefs: [
                { orderable: false, targets: -1 },
                { "className": "dt-center", "targets": "_all" }
            ],
            "dom": 'l <"pull-right"f> <"toolbar"> tip'
        });
        $("div.toolbar").html("<button class=\"btn btn-info\" onclick=\"metroDialog.open('#AddLocationModel')\">Add Location</button>");
        activateMenuButton("btn_locations");
    }

});

}

但是上面代码的输出是this

但我希望输出像 this

Answer 1

像您一样使用 DataTables dom 选项是一个很好的方法。

您可以使用类似于中所示的解决方案，但有一些不同。

解决方法：

我使用这些 CSS 样式：

div.dt-top-container {
  display: grid;
  grid-template-columns: auto auto auto;
}

div.dt-center-in-div {
  margin: 0 auto;
}

div.dt-btn-container {
  margin: 0 0 0 auto;
}

我使用dom选项如下：

dom: '<"dt-top-container"<l><"dt-center-in-div"f><"dt-btn-container"B>r>tip',

这会将 table 上方的三个控件置于三个单独的 div 中。还有一个环绕的 div 控制这些 div 的网格布局。

样式然后确保控件的 left/center/right 间距。

请注意，这使用了用于 DataTables 按钮的 B 选项。但这里的好消息是：您不需要导入任何 DataTables 按钮库。仅使用 B 是一种方便的方法，可以在右侧为我们提供第三个（空）div，然后我们可以将自定义按钮放入其中（类似于您的方法）：

$("div.dt-btn-container").html("<button class=\"btn btn-info\" onclick=\"metroDialog.open('#AddLocationModel')\">Add Location</button>");

最终结果如下所示：

如何重新排列 DataTables 控件

How to rearrange DataTables controls

jquery

datatables