尝试创建用于图像

我需要创建与图像创建一个tipical列的过滤器的列的yadcf过滤器：每个字段与此格式的图像：我创建了一个小提琴尝试创建用于图像

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

例如这里：fiddle

的解释：

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

在此先感谢。

PD：

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

<td data-search="notassigned">

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

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

请再帮我一下。提前致谢。

来源

2017-01-16 mgutbor

你必须明白，你对更新原来的问题改变了基于你原来的问题和原来的jsfiddle例子给出的解决方案，这使你的更新不是一个真正的upd吃了一个新的问题 – Daniel

您可以使用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 = $（'＃example'）。数据表（）;

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执行确切搜索，这可以，如果你避免将使用独特的搜索项在data-search=属性，

See working jsfiddle

Anoth由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

来源

2017-01-17 06:59:45 Daniel

Daniel，再次感谢您的帮助。有用。 – mgutbor

我不得不问你关于这个问题的其他问题：如何过滤此列按下按钮[分配]以获得只有这一列的行data-search =“assigned”??? 这里是修改的小提琴：https：//jsfiddle.net/mgutbor/m26jzxsf/;正如你所看到的，按钮只会引发警报。在此先感谢x2;） – mgutbor

您必须检查yadcf文档以发现其所有可能性，请使用'yadcf.exFilterColumn'，请参阅工作jsfiddle https://jsfiddle.net/m26jzxsf/1/ – Daniel

尝试创建用于图像

回答

相关问题