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

Question

我需要在用图像创建的典型列上创建过滤器:每个字段都是具有这种格式的图像:

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

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

一个解释:

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

提前致谢。

进展:

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

<td data-search="notassigned">

直接在 HTML 代码上。作为解决方案，我使用了 createdCell(columnDefs 选项)，正如您在下一次更新中看到的那样，在 td 元素上创建数据搜索属性 fiddle .

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

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

Answer 1

您可以使用 datatables HTML5 data-* attributes ，然后使用 html5_data 告诉 yadcf 依赖此 dt 功能

所以你的 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 中包含 assigned 词，我不得不告诉 yadcf 执行精确搜索，如果您使用 unique，则可以避免这种情况在您的 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