选择与 jquery DataTable 不兼容答案

【问题标题】：Chosen Incompatibility with jquery DataTable选择与 jquery DataTable 不兼容
【发布时间】：2016-10-08 22:25:33
【问题描述】：

我为数据表中的过滤数据创建了一个新的标题行。对于某些列，我想使用一个值列表，我可以选择一个值并过滤该值的行数据。为此，我想使用选择的插件。

发生的情况是，当我定义数据表选项scrollX 或scrollY 时，标题变为不好的外观，并且插件的下拉列表超出数据表的行数据。但是，如果我删除此选项，一切都会正常运行 - 正如预期的那样。

https://jsfiddle.net/sja9v7Lu/6/

谁能帮我解决这个问题？

谢谢

 $(document).ready(function () {
        var table = $('#example').DataTable({
                scrollX: true
        });

                    // Create filter row
        var filterTr = $('<tr></tr>');
        table.columns().every(function (colIndex, tLoopCounter, cLoopCounter) {
            var that = this, filterTd = null;

            if (this.header().cellIndex >= 0) {
                filterTd = $('<td></td>');
                if (colIndex == 2) {

                    var selectOptions = table.rows().data().pluck(colIndex).unique();

                    var select = $('<select id="office" class="chosen-select input-sm" />')
                    select.append('<option value="" />');

                    $.map(selectOptions, function (el, idx) {
                        var option = '<option value="' + el + '">' + el + '</option>';
                        select.append(option);
                    });

                    filterTd.append(select);

                    $('select#office', filterTd).chosen({
                        disable_search_threshold: 10,
                        allow_single_deselect: true,
                        width: "100%"
                    });

                    $('select#office', filterTd).on('change', function () {
                        var newValue = this.value;
                        if (that.search() !== newValue) {
                            that
                                .search(newValue)
                                .draw();
                        }
                    });
                }
                filterTr.append(filterTd);
            }
        });

        if ($('input, select', filterTr).length > 0)
            $('tr:last', table.table().header()).after(filterTr);

    });

【问题讨论】：

我也遇到了类似的问题，切换到silviomoreto.github.io/bootstrap-select
我在一个示例中对其进行了测试，它需要一些额外的工作bootstrap-select solution。我找到的最佳替代方案是select2，但我如何在已经使用 selected 的项目中工作，我也想在这里使用它。但如果我没有得到选择的解决方案，我会考虑使用 select2。

标签： datatables jquery-chosen

【解决方案1】：

我遇到了同样的问题，我用以下 css 修复了它：

.dataTable .chosen-choices {z-index: 9999;} .dataTable thead th .chosen-results li:first-child {margin-top: 30px;}

编辑：如果 div.chosen-choices 与单个 li.search-choice 具有相同的高度，则边距顶部为 30px，但只要我们继续选择其他选项，div.chosen-choices 就会长大，因此必须这样做边距顶部。最后，我用这段代码得到它（选择是动态创建的）：

$('body').on('chosen:showing_dropdown', '.yadcf-filter-wrapper select', function (evt, params) { var _height = $(evt.target).closest("div").find(".chosen-choices").height(); $(evt.target).closest("div").find(".chosen-results li:first-child").attr("style", "margin-top:" + _height + "px"); });

100% 工作，在 Mozilla 和 Chrome 中测试

【讨论】：