使用带有引导程序的 dataTables 将自定义控件附加到 dom

Question

我为数据表搜索框添加了一个选择（下拉），用于搜索每列，并尝试将该选择添加到搜索框，如下所示->

var table = $('#example').DataTable({
 dom: '<l<"toolbar">f>rtip',
            language: {
                search: "_INPUT_", //To remove Search Label
                searchPlaceholder: "Search..."
            }
})  
$("div.toolbar").html(select);

CSS

.toolbar {
        float: right;
    }

它实际上在小提琴上工作 -> https://jsfiddle.net/32v2qpj1/5/

令人惊讶的是，当我在我的 .aspx 页面上实现相同的长度和过滤器位置时，如下图所示。每当我使用 dom 时，引导行和列网格都会丢失。它将长度和搜索添加为 2 个单独的行，并在页脚处添加相同的行。我尝试了来自https://datatables.net/reference/option/dom 的示例来检查我的代码是否错误。只是在使用 DOM 时重新定位！

我不知道为什么只添加 dom 时它会重新定位。我想知道有没有其他方法可以将选择控件添加到搜索框？

Answer 1

嗯。如果您设置了dom 选项，那么您将覆盖默认的dom 设置，该设置在带有 Bootstrap 的 dataTables 中是：

"<'row'<'col-sm-6'l><'col-sm-6'f>>" +
"<'row'<'col-sm-12'tr>>" +
"<'row'<'col-sm-5'i><'col-sm-7'p>>",

当我们有这样的预定义设置时，没有理由注入.toolbar。而是给过滤器部分多一点空间：

"<'row'<'col-sm-5'l><'col-sm-7'f>>" +

并为#select 定义最大宽度：

select#select {
  width: 100px;
  display: inline-block;
} 

最后将标准 Bootstrap 类添加到 #select ：

<select id="select" class="form-control input-sm">

并将选择附加到.dataTables_filter：

$(".dataTables_filter").append(select);

这提供了我们想要的 Bootstrap 响应式体验。

更新小提琴 -> https://jsfiddle.net/32v2qpj1/6/

---

注意：如果您使用引导程序，请记住删除jquery.dataTables.min.css！相反，将 <table> 设置为 Bootstrap 方式：

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">