使用onClick过滤DataTables数据

Question

我有一个类别列表和一个文档表，并且都填充有本地JSON数据。每个类别项目都对应一个文档（某些文档具有多个类别），因此我想创建该文档，以便单击一个类别将在表中过滤其文档。

  

示例：如果我单击列表项目“水果”，我希望表格进行更新并   仅显示“苹果，香蕉，猕猴桃”，而隐藏“黄色旱冰鞋”。但   如果我点击“黄色物体”，我希望表格显示“香蕉，黄色   Rollerskates。”换句话说，一些结果在“多个”下列出   类别。

目前，类别已被href href设置，但什么也没做。

由于文档存储在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();

将类别转换为href并将其添加到.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