bootstrap-table фильтрация данных таблицы с входными тегами

я пытаюсь отфильтровать таблицу начальной загрузки, используя расширения filter-controller или select2-filter от wenzihixin (перечислены здесь)

я создаю редактируемые поля в своей таблице следующим образом:

  <table>
    <thead>...</thead>
    <tbody>
       <tr>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="2" data-field="fieldname" value = "bird"></td>
          <td><input data-id="1" data-field="fieldname" value = "pig"></td>
          <td><input data-id="4" data-field="fieldname" value = "dog"></td>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="5" data-field="fieldname" value = "pig"></td>
          <td><input data-id="2" data-field="fieldname" value = "dog"></td>
          <td><input data-id="7" data-field="fieldname" value = "cat"></td>              
       </tr>
       <tr>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="2" data-field="fieldname" value = "bird"></td>
          <td><input data-id="1" data-field="fieldname" value = "pig"></td>
          <td><input data-id="4" data-field="fieldname" value = "dog"></td>
          <td><input data-id="1" data-field="fieldname" value = "cat"></td>
          <td><input data-id="5" data-field="fieldname" value = "pig"></td>
          <td><input data-id="2" data-field="fieldname" value = "dog"></td>
          <td><input data-id="7" data-field="fieldname" value = "cat"></td>              
       </tr>
       ...etc...
    </tbody>
  </table>

(кстати, это просто фиктивные данные, я не могу раскрыть настоящие данные).

я пытался использовать select2-filter и filter-control для фильтрации результатов в таблице, и они оба работают, но они оба в конечном итоге фильтруют ВСЕ мои данные между тегами TD, поэтому, если бы я фильтровал «1», это вернет все строки, в которых идентификатор данных этого столбца = "1".

мой вопрос: как мне ограничить их (любое расширение будет работать нормально), чтобы смотреть ТОЛЬКО на значение входного тега?


input filtering bootstrap-table jquery-select2
person Andy    schedule 07.02.2018    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Один из способов — отделить данные от форматирования поля ввода. Посмотрите на этот JSFiddle.

Используйте параметр формата (формат данных) для форматирования поля ввода html. Функция формата имеет поле параметров (значение, строка и индекс), которое можно использовать для создания html с классами, гиперссылками, кнопками, флажками и т. д. Примечание. Я подозреваю, что поле id взято из ваших данных, поэтому я добавил его в json. массив данных из одного из примеров кодов, показанных здесь.

function formatInput(value,row,index){
return '<input data-id="' + row.id + '" value="' + value + '">';
}
person Jim Kennelly    schedule 08.02.2018
comment
Он не спрашивает, как отображать входные данные, а как их правильно фильтровать. - person Silencer; 20.06.2019