Jquery 使用带引导的数据表将自定义控件附加到dom

我已经为datatables搜索框添加了一个selectdropdown，用于搜索每列，并尝试将该selectdropdown添加到搜索框，如下所示->

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

它实际上在小提琴上起作用->

令人惊讶的是，当我在我的.aspx页面上实现相同的功能时，长度和过滤器位置一直在变化，如下图所示。每当我使用dom时，引导行和列网格都会丢失。它添加为长度和搜索的两个独立行，在页脚处相同。我尝试了来自的示例来检查我的代码是否错误。使用DOM时只是重新定位

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

好的。如果设置dom选项，则覆盖默认的dom设置，该设置在具有引导功能的dataTables中为：

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

并定义选择的最大宽度：

选择选择{ 宽度：100px； 显示：内联块； } 最后，将标准引导类添加到选择：

并将选择附加到.dataTables\u筛选器：

$.dataTables_filter.appendselect； 这将提供我们希望从引导中获得的响应体验

更新的小提琴->

注意：如果使用引导，请记住删除jquery.dataTables.min.css！相反，请使用引导方式设置样式：

---

非常感谢先生的帮助！我对您的代码做了一个小改动，因为未定义使用.appenddom元素在IE上不起作用，并且错误ed select。因此更改了$.dataTables\u filter.appendselect；到设el=document.querySelector'select'；$。dataTables_filter.appendel；那么它在IE上工作得很好。再次谢谢你，先生！

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

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