Попытки создать yadcf фильтр для столбца с изображениями

Question

мне нужно создать фильтр на Tipical столбцов, созданных с изображениями: каждое поле представляет собой изображение в этом формате:

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

Я создал скрипку пример здесь: fiddle

экспликации:

• есть только два состояния diferents: [назначен/не назначен], хотя есть 4 diferents изображения (черный, красный, желтый и зеленый).
• Только черные изображения соответствуют не присвоенному статусу. Остальные три (красный, желтый и зеленый) соответствуют присвоенному статусу.
• Как вы могли видеть, я попытался дифференцировать эти теги по классу HTML в элементах img (notasg/asgn).

Заранее спасибо.

PD:

Я получаю данные из JSON, так что я не могу поставить:

<td data-search="notassigned"> 

непосредственно на HTML код. В качестве решения я использовал параметр createdCell (columnDefs), как вы могли видеть на следующем обновленном, чтобы создать атрибут поиска данных на элементе td fiddle.

В этом случае, как вы могли бы проверить, ваш ранее созданный фильтр не работает. Я пробовал некоторые решения, но никто не работал.

Пожалуйста, помогите мне снова на этом. Заранее спасибо.

Answer 1

Вы можете использовать datatables HTML5 data-* attributes, а затем сказать yadcf полагаться на это дт функции с использованием html5_data

Так что ваши 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

Аноф эр решение, как введено kthorngren from datatables forum является использование следующей дт Код инициализации

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 инициализации (удалено 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