尝试为包含图像的列创建 yadcf 过滤器

Question

我需要在使用图像创建的典型列上创建过滤器：每个字段都是具有以下格式的图像：

<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>

我在这里创建了一个 fiddle 示例：fiddle

一个解释：

虽然有 4 个不同的图像（黑色、红色、黄色和绿色），但只有 2 个不同的状态：[assigned/not 已分配]。
只有黑色图像对应未分配状态。其他三个（红色，黄色和绿色）对应分配的状态。
如您所见，我尝试通过 img 元素 (notasg/asgn) 中的 class HTML 标记来区分这些状态。

提前致谢。

PD：

我正在从 json 获取数据，所以我不能输入：

<td data-search="notassigned">

直接在 HTML 代码上。作为解决方案，我使用了 createdCell（columnDefs 选项），正如您在下一次更新中看到的那样，在 td 元素 fiddle.

上创建数据搜索属性

正如您可以测试的那样，在这一项中，您之前创建的过滤器不起作用。我尝试了一些解决方案，但没有人奏效。

请再次帮助我解决这个问题。提前致谢。

Answer 1

您可以利用 datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data

所以你的td看起来像

<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>

yadcf init 看起来像

var oTable = $('#example').DataTable();

    yadcf.init(oTable, [
        {
            column_number: 0,
            html5_data: 'data-search',
            filter_match_mode: 'exact',
            data: [{
                value: 'assigned',
                label: 'Assigned'
            }, {
                value: 'notassigned',
                label: 'Not assigned'
            }]
        }]);

请注意，我使用 filter_match_mode: 'exact', 是因为我使用了 data-search="notassigned" 和 data-search="assigned"，并且由于 中包含 分配的 单词]notassigned 我不得不告诉 yadcf 执行 exact 搜索，如果您在 data-search= 属性中使用唯一搜索词，则可以避免这种情况，

See working jsfiddle

kthorngren from datatables forum 介绍的另一种解决方案是使用以下 dt 初始化代码

var oTable = $('#example').DataTable({
    columnDefs: [{
        targets: 0,
        render: function(data, type, full, meta) {
            if (type === 'filter') {
                return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
            } else {
                return data
            }
        }
    }],
});

和yadcf init（删除html5_data）

yadcf.init(oTable, [
    {
        column_number: 0,
        filter_match_mode: 'exact',
        data: [{
            value: 'assigned',
            label: 'Assigned'
        }, {
            value: 'notassigned',
            label: 'Not assigned'
        }]
    }
]);

third option - look here

尝试为包含图像的列创建 yadcf 过滤器

Trying to create a yadcf filter for a column with images

datatables

yadcf