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

Posted 2023-05-07

【中文标题】使用带有引导程序的 dataTables 将自定义控件附加到 dom

【英文标题】：Append custom control to dom using dataTables with bootstrap

【发布时间】：2017-10-18 22:20:16

【问题描述】：

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

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 时它会重新定位。我想知道有没有其他方法可以将选择控件添加到搜索框？

【参考方案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" >

【讨论】：

非常感谢先生的帮助！我对您的代码做了一些小改动，因为使用 .append(dom element) 无法在 IE 上运行并且错误“选择未定义”。于是改了 $(".dataTables_filter").append(select);到... 让 el = document.querySelector('#select'); $(".dataTables_filter").append(el);然后它在 IE 上运行良好。再次感谢先生！