单击标题内的输入字段时，DataTables 会过滤列

Question

我有一个 DataTables 实例，它在表的标题中附加一个选择。 这里是一个显示它的代码笔。

这是将选择添加到标题的相关代码部分

        initComplete: function () {
            count = 0;
            this.api().columns().every(function () {
                var title = this.header();
                //replace spaces with dashes
                title = $(title).html().replace(/[\W]/g, '-');
                var column = this;
                var select = $('<br><select id="' + title + '" class="select2" ></select>')
                    .appendTo($(column.header()))
                    .on('change', function () {
                        //Get the "text" property from each selected data
                        //regex escape the value and store in array
                        var data = $.map($(this).select2('data'), function (value, key) {
                            return value.text ? '^' + $.fn.dataTable.util.escapeRegex(value.text) + '$' : null;
                        });

                        //if no data selected use ""
                        if (data.length === 0) {
                            data = [""];
                        }

                        //join array into string with regex or (|)
                        var val = data.join('|');

                        //search for the option(s) selected
                        column
                            .search(val ? val : '', true, false)
                            .draw();
                    });
                //unique, tipo group by 
                //sorte deixa em ordem abcd
                column.data().unique().sort().each(function (d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });

                //use column title as selector and placeholder
                $('#' + title).select2({
                    multiple: true,
                    closeOnSelect: false,
                    placeholder: "Select a " + title
                });

                //initially clear select otherwise first option is selected
                $('.select2').val(null).trigger('change');
            });
        }

但是我注意到将其放在标题中的一个缺点是，当我单击选择时，DataTables 认为我正在按该列进行排序。如果我在选择内部单击（其 ID 等于列名称），有没有办法不对列进行排序

编辑：我正在寻找一种解决方案，当我单击标题列内的

input

元素时，不会触发列排序。

Answer 1

有两种方法可以做到这一点。

首先是完全禁用点击排序。只需将其放入您的表格选项中即可：

ordering: false,

另一个选项是标题中有两行。第一行应该是带有列标题的

th

，第二行应该是

td

单元格内的下拉过滤器。这是因为 DataTables 在

th

单元格内为排序箭头保留了一个空间，即使它们不存在。

<thead>
    <tr>
        <th>Demanda</th>
        <th>Título</th>
        <th>Solicitante</th>
        <th>Data Inclusao</th>
        <th>Área</th>
        <th>SP</th>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</thead>

您需要将

appendTo()

更改为如下所示：

.appendTo($(`#example thead tr:eq(1) td`).eq(this.index()))

然后在您的表格选项中您可以设置

orderCellsTop: true,

这将允许您在单击顶部标题行时进行排序并从第二个标题行的下拉列表中进行过滤。

Answer 2

我针对同样问题所做的最简单的解决方案是：

document.addEventListener("click", e => {
    var target = e.target;
    if ($(target).closest("th").hasClass("sorting") && $(target).prop("tagName") == "INPUT") {
        /* You can replace or add more element types in condition. */
        e.stopPropagation();
        e.preventDefault();
    }
}, true);

Answer 3

我知道这是一篇旧文章，但我在这里添加它以防其他可怜的人遇到这个问题。 Niravdas 的解决方案在您单击选择元素时有效，但在您选择一个项目时则无效（它将进行列排序）。这是因为选择的项目是

<option>my item</option>

标签。

我添加了下面的 hacky 修复。

document.addEventListener("click", e => {
    var target = e.target;
    if ($(target).closest("th").hasClass("sorting") && 
        $(target).prop("tagName") == "INPUT" || 
        $(target).prop("tagName") == "OPTION") {
            e.stopPropagation();
            e.preventDefault();
        }
    }, true);