使用带有引导程序的dataTables将自定义控件附加到dom [英] Append custom control to dom using dataTables with bootstrap

问题描述

我为数据表搜索框添加了一个select(下拉列表)，用于按列搜索，并尝试按如下方式将该选择添加到搜索框中->

I have added a select(dropdown) for datatables search box for searching per column and trying to add that select to searchbox as below->

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/

It actually worked on fiddle -> https://jsfiddle.net/32v2qpj1/5/

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

Surprisingly length and filter position has been changing when I implemented the same on my .aspx page like below image. Bootstrap row and col grids are missing whenever I use dom. It adding as a 2 seperate rows for length and search and as same at footer. I tried examples from https://datatables.net/reference/option/dom to check if my code is wrong. It's just re-positioning when use DOM!

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

I have no idea why it is re-positioning when only added dom. I was wondering is there any other way to add select control to the search box?

推荐答案

好.如果设置dom选项，则将覆盖默认的dom设置，该设置在带有Bootstrap的dataTables中为:

Well. If you set the dom option, then you overwrite the default dom setting which in dataTables with Bootstrap is :

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

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

There is no reason for injecting a .toolbar when we have a predefined setup like this. Instead give the filter section a little more space :

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

并定义#select的最大宽度:

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

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

Finally add standard Bootstrap classes to the #select :

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

并将选择附加到.dataTables_filter:

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

这为我们提供了Bootstrap所需的响应式体验.

This give the responsive experience we want from Bootstrap.

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

updated fiddle -> https://jsfiddle.net/32v2qpj1/6/

NB :如果您使用引导程序，请记住删除jquery.dataTables.min.css！相反，请设置<table>引导方式的样式:

NB: Remember to remove jquery.dataTables.min.css if you use bootstrap! Instead, style the <table> the Bootstrap way :

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

这篇关于使用带有引导程序的dataTables将自定义控件附加到dom的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！