Question

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

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

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

解释：

只有2个不同的状态：[已分配/未分配]虽然有4个不同的图像（黑色，红色，黄色和绿色）。
仅黑色图像对应未分配状态。其他三个（红色，黄色和绿色）对应于指定的状态。
正如您所看到的，我尝试通过img元素中的类HTML标记区分这些状态（notasg / asgn）。

提前致谢。

PD：

我从json获取数据，所以我不能把：

<td data-search="notassigned">

直接在HTML代码上。作为一个解决方案，我已经使用了createdCell（columnDefs选项），你可以在下一次更新时看到，在td元素fiddle上创建数据搜索属性。

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

请再次帮助我。提前谢谢。

Answer 1

您可以使用datatables HTML5 data-* attributes，然后告诉yadcf使用html5_data

依赖此dt功能

因此，您的td看起来像

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

和yadcf init看起来像

var oTable = $（＆＃39; #example＆＃39;）。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"，并且因为指定的字包含在未分配中必须告诉yadcf执行完全搜索，如果您在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过滤器

1 个答案: