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

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

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

CSS

 .toolbar { float: right; } 

它实际上适用于小提琴 – > https://jsfiddle.net/32v2qpj1/5/

令人惊讶的是，当我在我的.aspx页面上实现相同的长度和filter位置时，如下图所示。 每当我使用dom时，都会丢失Bootstrap行和col网格。 它添加了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 。 而是为filter部分提供更多空间：

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

并定义#select的最大宽度：

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

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

并将select附加到.dataTables_filter ：

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

这样可以从Bootstrap中获得我们想要的响应体验。

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

---

注意 ：如果你使用bootstrap，请记得删除jquery.dataTables.min.css ！ 相反，设置

Bootstrap方式的样式：