Интеграция Bootstrap typeahead js с Bootstrap Datatable

Question

Я использую bootstrap data-tables Datatables и bootstrap-taginput с typehead.js. Я новичок в бутстрап-таблицах данных.

Вот расположение моих загрузочных таблиц данных Example и, пожалуйста, рассмотрите поле ввода тегов Bootstrap сверху.

Я хочу искать записи таблиц данных с элементами тегов ботов. но почему-то я не могу выполнить поиск с помощью меток ботстрапа.

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

Answer 1

Если вы начинаете с пустого массива данных, которые у вас есть на столе, вы можете сделать что-то умное, заменив встроенное окно поиска. В примере я ссылаюсь я не заботится об одном из столбцов и другие столбцам нужны немного форматирования:

var words = []; 
var table = $('#example').DataTable({ 
    "columns": [ 
     null, { 
      "render": function(data, type, row) { 
       ~words.indexOf(data) || words.push(data); 
       return data; 
      } 
     }, { 
      "render": function(data, type, row) { 
       var d = data.replace(/\, /g, " "); 
       ~words.indexOf(d) || words.push(d); 
       return data.split(", ").join("<br/>"); 
      } 
     } 
    ], 
    "initComplete": function() { 
     var searchBox = $("#example_wrapper").find("input[type='search']"); 
     var searchBoxHolder = searchBox.parent(); 
     searchBox.empty().remove(); 
     searchBoxHolder.append($("<input/>", { 
      "type": "text" 
     }).typeahead({ 
      source: words, 
      afterSelect: function(word) { 
       table.search(word).draw(); 
      } 
     }).on("keyup", function(x) { 
      if (words.indexOf($(x.target).val()) === -1) { 
       table.search($(x.target).val()).draw(); 
      } 
     })); 
    } 
}); 

В основном то, что мы делаем здесь, создавая пустой массив поисковых терминов, то повторяя каждую вторую и третью ячейки и добавляя термин к массиву, если он не существует. В случае с третьей ячейкой мне нужно очистить некоторое форматирование (дополнительная запятая). Затем мы получаем исходное поле поиска, и оно является родительским. Удалите оригинал и добавьте новый родительский. Затем мы установили его как typeahead со списком условий поиска. Нам нужно убедиться, что он по-прежнему действует как оригинал, поэтому мы добавляем функцию keyup. Я надеюсь, что в этом есть смысл.

Рабочий пример: here, надеюсь, что это поможет.