外部ボタン/リンクによるDatatableフィルタ

Question

テーブルの横にツリービュータイプのボタン/リンクを使用してテーブルの検索をフィルタリングしようとしています。これはデザインです：

ここではトリッキーな部分です。したがって、年をクリックすると、テーブルは年ごとにフィルタリングされます。次に、年の下のカテゴリもクリックした場合、年などでフィルタリングされます。 私は本当にdatatablesでAPIをカスタマイズすることを考えていません。

Answer 1

const data = [ 
 
    'a-T1-2016-01', 
 
    'b-T1-2016-01', 
 
    'c-T1-2016-02', 
 
    'd-T1-2015-01', 
 
    'e-T1-2015-01', 
 
    'f-T1-2016-03', 
 
] 
 

 
$('[data-filter]').click(function() { 
 
    const filterStr = $(this).attr('data-filter') 
 
    alert(data.filter((x) => x.includes(filterStr)).join(',')) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul> 
 
    <li> 
 
    <a data-filter="2015">2015</a> 
 
    <ul> 
 
     <li> 
 
     <a data-filter="T1-2015">Type1</a> 
 
     <ul> 
 
      <li> 
 
      <a data-filter="T1-2015-01">01</a> 
 
      </li> 
 
      <li> 
 
      <a data-filter="T1-2015-02">02</a> 
 
      </li> 
 
      <li> 
 
      <a data-filter="T1-2015-03">03</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
    <li> 
 
    <a data-filter="2016">2016</a> 
 
    <ul> 
 
     <li> 
 
     <a data-filter="T1-2016">Type1</a> 
 
     <ul> 
 
      <li> 
 
      <a data-filter="T1-2016-01">01</a> 
 
      </li> 
 
      <li> 
 
      <a data-filter="T1-2016-02">02</a> 
 
      </li> 
 
      <li> 
 
      <a data-filter="T1-2016-03">03</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>

か、<a data-filer="year=xx&month=xx"></a>

のように、フィルタマルチカラムを必要とするかもしれないか、あなたが別のコントロール

const filters = {} 
 

 
$('[data-filter]').click(function() { 
 
    const filterStr = $(this).attr('data-filter') 
 
    filters[filterStr] = !filters[filterStr] 
 
    alert(Object.keys(filters).filter((x) => filters[x]).join(',')) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<a data-filter="2015">2015</a> 
 
<a data-filter="2016">2016</a> 
 
<a data-filter="2017">2017</a>

からフィルタを必要とするかもしれません

または

をこれらを構成するには、あなたの次のプロジェクトのために（角度/ VUE /反応）の使用MVVMを示唆して、彼らは自動にUIを扱う、あなたはこのため