javascript - 使用 jquery 数据表时如何通过选择框更改自定义 dom

Question

我有一个简单的代码:

<div class="table-actions-wrapper">
   <select class="table-group-action-input form-control">
      <option value="">Sort By</option>
      <option value="desc">Date Highest</option>
      <option value="asc">Date Lowest</option>
   </select>
</div>
<table id="datatable"></table>

我的结果:

这是我在数据表中的dom

"dom": "<'row'<'col-md-8 col-sm-12'l><'col-md-4 col-sm-12'f>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

=> 如何通过右上角表格中的“排序依据”选择框更改输入过滤器。有什么想法吗？

Answer 1

您可以使用以下过程(而不是过多地尝试自定义数据表的 dom 属性):

1. 等待数据表初始化(并填充数据)
2. 将现有的 div.table-actions-wrapper 移动到数据表 DOM 中的正确位置

例子

数据表 dom 属性(添加了 ID 并删除了搜索字段):

"dom": "<'row'<'col-md-8 col-sm-12'l><'#customSort.col-md-4 col-sm-12'>t<'row'<'col-md-5 col-sm-12'i><'col-md-7 col-sm-12'p>>",

jQuery 将自定义排序下拉列表移动到位:

$('#datatable').on('init.dt', function () {
    var customSort = $('.table-actions-wrapper').detach();
    customSort.appendTo('#customSort');
});