jquery - 数据表处理页脚过滤中的数组数据

Question

我有一个带有页脚过滤的数据表。每列都有 1 个值，该值与处理页脚过滤的默认方式完美配合:

//Add footer filtering
this.api().columns([2, 6, 7, 8, 9, 10]).every(function () {
    var column = this;
    var select = $('<select><option value=""></option></select>')
        .appendTo($(column.footer()).empty())
        .on('change', function () {
            var val = $.fn.dataTable.util.escapeRegex(
                $(this).val()
            );
            column
                .search(val ? '^' + val + '$' : '', true, false)
                .draw();
        });
    column.data().unique().sort().each(function (d, j) {
        console.log(d);
        if (d) {
            var val = $('<div/>').html(d).text();
            select.append('<option value="' + val + '">' + val + '</option>')
        }
    });
});

现在是异常(exception)(第 6 列)；有一栏填写了 3 种可能性:

1) 空

2) 只有一个值的数组

3) 具有多个值的数组

Atm 在下拉列表中选择一个选项时，过滤不会找到任何结果，我认为这是因为它搜索文本，并且其中的数据作为数组发送(见下文)。 de datatable 本身的 html 插入如下:

<span class="badge badge-pill badge-primary">suborg test met lange titel</span>

我进行了广泛的搜索，但似乎找不到适合我的解决方案的正确方法。结果应该是页脚过滤器下拉列表将为每个单独的标签包含一行，并且它实际上会过滤。所以理想的结果是:

(请注意，这是直接在 HTMl 中编辑的)

在上面的代码片段中，有一个控制台日志，其中显示了该列的数据传递方式:

我想为该列创建一个特定的页脚过滤，但我真的很困惑如何处理数组数据:

this.api().columns(6).every( function () {}

谁可以为我提供我所缺少的黄金秘诀？

提前致谢

<小时/>

编辑

我已经能够循环数据并在下拉列表中获得更好的选项:

使用以下代码:

column.data().unique().sort().each(function (d, j) {
    if (d) {
        $.each(d, function (index, value) {

            var val = $('<div/>').html(value).text();
            select.append('<option value="' + val + '">' + val + '</option>');
        });

    }
});

但是过滤与数据表中的任何结果都不匹配。仍然非常坚持这一点。

Answer 1

您可以删除这些搜索额外值并检查

column.search(val ? '^' + val + '$' : '', true, false).draw();

到

column.search(val).draw();

you can also search each column through--

//indexcolumn--where we need the filter (column index )



  initComplete: function()
     {
    this.api().columns(indexcolumn).every(function() 
    {
        var column = this;
        $('input', this.header()).on('keyup', function() {
          if (column.search() !== this.value) {
            column
              .search(this.value)
              .draw();
          }
        });
      });

    }

for more information-- https://jsfiddle.net/vigneshwarannevilish/gx5vh9jm/73/