嘗試創建用於圖像

我需要創建與圖像創建一個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

嘗試創建用於圖像

回答

相關問題