如何重新排列 DataTables 控件答案

【问题标题】：How to rearrange DataTables controls如何重新排列 DataTables 控件
【发布时间】：2021-03-18 10:57:48
【问题描述】：

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

我尝试了以下代码

  $('#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

【问题讨论】：

标签： jquery datatables

【解决方案1】：

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

您可以使用类似于this answer 中所示的解决方案，但有一些区别。

解决办法：

我使用这些 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',

这会将表格上方的三个控件放入三个单独的 div 中。还有一个周围的 div 来控制这些 div 的网格布局。

样式然后确保控件的左/中/右间距。

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

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

最终结果如下所示：

【讨论】：