数据表在页脚过滤中处理数组数据 [英] Datatables handle array data in the footer filtering

问题描述

我有一个带有页脚过滤功能的数据表. 每列都有1个值，可以完美地处理页脚过滤的默认方式:

I have a datatable with footer filtering. Each column has 1 value which works perfect with the default way of handling the footer filtering:

//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>')
        }
    });
});

现在例外(第6栏)；一栏填充了3种可能性:

Now the exception (column 6); there is one column which is filled in with 3 possibilities:

1)空

2)具有一个值的数组

3)具有多个值的数组

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

Atm when selecting an option in the dropdown the filtering will not find any results i think because it searches on text and the data there is send as an array (see below). The html in de datatable itself is inserted as followed:

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

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

I've searched far and wide but I cannot seem to find a correct approach for my solution. The result should be that the footer filter dropdown will contain a row for each seperate tag and that it actually filters. So the ideal outcome would be:

(请注意，此代码直接在HTMl中作为ex进行编辑)

(note that this is edited directly in the HTMl as ex)

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

In the code snippet above there is a console log which shows how the data is passed for that column:

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

I've figured to create a specific footer filtering for that column but i'm really stuck on how to handle the array data:

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

谁能给我提供我所缺少的小费?

Who can provide me the golden tip i'm missing?

预先感谢

编辑

我已经能够遍历数据并在下拉菜单中获得更好的选择:

I've been able to loop through the data and get better options in the dropdown:

使用以下代码:

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>');
        });

    }
});

但是，筛选与数据表中的任何结果都不匹配. 仍然对此深感困惑.

However the filtering doesn't match any results in the datatable.. Still very stuck on this.

推荐答案

是否可以删除这些搜索多余的值并检查

can you remove these search extra values and check

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

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

到

column.search(val).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();
          }
        });
      });

    }

有关更多信息- https://jsfiddle.net/vigneshwarannevilish/gx5vh9jm/73/

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

这篇关于数据表在页脚过滤中处理数组数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！