Datatables 选择与jquery DataTable不兼容_Datatables_Jquery Chosen

Datatables 选择与jquery DataTable不兼容

datatables

Datatables 选择与jquery DataTable不兼容,datatables,jquery-chosen,Datatables,Jquery Chosen,我为datatable中的过滤器数据创建了一个新的标题行。对于某些列，我希望使用一个值列表，我可以选择一个值并筛选该值的行数据。为此，我想使用选择的插件发生的是，当我定义datatable选项scrollX或scrollY时，标题变为一个糟糕的外观，插件的下拉列表停留在datatable的行数据之外。但是如果我删除这个选项，一切都会正常工作——正如预期的那样有人能帮我解决这个问题吗谢谢 $(document).ready(function () { var tab

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

发生的是，当我定义datatable选项scrollX或scrollY时，标题变为一个糟糕的外观，插件的下拉列表停留在datatable的行数据之外。但是如果我删除这个选项，一切都会正常工作——正如预期的那样

有人能帮我解决这个问题吗

谢谢

 $(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);

    });

$（文档）.ready（函数（）{
变量表=$（'#示例'）。数据表({
是的
});
//创建筛选器行
变量filterTr=$（''）；
table.columns（）.every（函数（colIndex、tLoopCounter、cLoopCounter）{
var=this，filterTd=null；
if（this.header（）.cellIndex>=0）{
filterTd=$（''）；
如果（colIndex==2）{
var selectOptions=table.rows（）.data（）.pull（colIndex.unique（）；
变量选择=$（“”）
select.append（“”）；
$.map（选择选项，函数（el，idx）{
var期权=''+el+''；
选择。追加（选项）；
});
filterTd.append（选择）；
$（'select#office'，filterTd）。已选择({
禁用搜索阈值：10，
允许单次取消选择：true，
宽度：“100%”
});
$（'select#office'，filterTd）.on（'change'，function（）{
var newValue=此.value；
if（that.search（）！==newValue）{
那个
.search（newValue）
.draw（）；
}
});
}
filterTr.append（filterTd）；
}
});
if（$（'input，select'，filterTr）.length>0）
$（'tr:last'，table.table（）.header（））。在（filterTr）之后；
});

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

.dataTable.Selected选项{z-index:9999；} .dataTable thead th.所选结果li:第一个子项{margin top:30px；}

编辑：如果div.selected-choices与单个li.search-choice具有相同的高度，则边距顶部为30px，但只要我们继续选择其他选项，div.selected-choices就会增大，边距顶部也必须增大。最后，我用这段代码得到了它（选择是通过友好方式创建的）：

$（'body'）.on（'selected:showing_dropdown'，'.yadcf filter wrapper select'，函数（evt，params）{ var_height=$（evt.target）.closest（“div”）.find（“.selected choices”）.height（）； $（evt.target）.最近的（“div”）.查找（“.selected results li:first child”）.attr（“style”，“margin top:”+_height+“px”）； });

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

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