Использование onClick для фильтрации данных DataTables

Question

У меня есть список категорий и таблица документов, и оба они заполнены локальными данными JSON.Каждый элемент категории соответствует документу (некоторые документы имеют несколько категорий), и я хочу сделать так, чтобы щелчок по категории отфильтровывал ее документы в таблице.

Пример. Если я нажимаю наэлемент списка «Фрукты» Я хочу, чтобы таблица обновлялась и отображала только «Яблоки, бананы, киви», скрывая при этом «Желтые роликовые коньки».Но если я нажму на «Желтые объекты», я бы хотел, чтобы на столе было показано «Бананы, желтые роликовые коньки».Другими словами, некоторые результаты перечислены в нескольких категориях.

На данный момент категории являются href'd, но ничего не делают.

Поскольку документы размещены в DataTable и при рендеринге категорий не использовались DataTables, я не уверен, как поступить так, чтобы оба работали друг с другом.

Я включил фрагмент JS ниже.Мне не удалось правильно отобразить таблицу с помощью JS Fiddle, поэтому, если вы хотите просмотреть HTML, сообщите мне.

Фрагмент JS:

import $ from 'jquery';

import JSONfile from '../../../public/JSONfile.json';
import { basename } from 'path';

import dt from 'datatables.net';

var categories = '';
var tableRes = '';

    export default class {
        constructor() {
            this.loadData();
            this.loadTableData();
        }

Загрузка категорий:

      loadData() {        
        let res = JSONfile.d.results.filter(function(val) {
          return (val.FileLeafRef.trim().length > 0);
        }).map(function(obj) {
            return {
              "FileName": obj.FileLeafRef,
              "Path": obj.EncodedAbsUrl,
              "Categories": obj.ResourceType.results.map(function(val) {
                  return val.Label;
              }).join(";")
            };
        });

        JSONfile.d.results.filter(function(val) {
          return (val.FileLeafRef.trim().length > 0);
        }).map(function(obj) {          
          return obj.ResourceType.results.map(function(val) {
            return val.Label;
          })
        });

Отображение каждой категории по одному разу:

        let unique = {};
          let temp = JSONfile.d.results.filter(function(val) {
            return (val.FileLeafRef.trim().length > 0);
          }).forEach(function(obj) {
            obj.ResourceType.results.forEach(function(val) {
              unique[val.Label] = true;
            })
          });    

          let categories = Object.keys(unique).sort();

Превращение категорий в hrefs и добавление их в .indiv-label:

          $(".indiv-label").html(categories.join("<br>"))
            .contents().each(function() {
              if (this.nodeType == 3) {
                let elem = $("<a>", {
                  href: "#" + this.nodeValue
                });
                $(this).wrap(elem)
              }
            });



   } // ------------- loadData()

Загрузкастол:

  loadTableData() {
    $.noConflict();
    let tableRes = JSONfile.d.results.filter(function(val) { 
      return (val.FileLeafRef.trim().length > 0);
    }).map(function(obj) {
      return {
        "Path": obj.EncodedAbsUrl,
        "Titles": obj.File.Name,
        "Categories": obj.ResourceType.results.map(function(val) {
          return val.Label;
        }).join(";"),
        "Blank": ''
        }
      });



    $('#km-table-id').DataTable( {
      columns: [
        { data: "Titles" },
        { data: "Categories" } // hidden col-3 categories
      ],
      columnDefs: [
        {
          data: "Path",
          render: function(data, type, row) {
            return $('<a>')
              .attr({target: "_blank", href: row.Path})
              .text(data)
              .wrap('<div></div>')
              .parent()
              .html();
          },
          targets: 0
        },
        { searchable: true, targets: [1], visible: false },
      ],
      data: tableRes,
      language: { searchPlaceholder: "Search All Documents" }

    });




  } // ------------------ loadTableData

} // ------------- export default class