Datatable Filter durch externe Tasten/Link

Question

Ich versuche, die Suche meiner Tabelle mit einem Baumansicht Typ von Schaltflächen/Links neben meinem Tisch zu filtern. Dies ist das Design:

Hier ist der knifflige Teil. Wenn ich also auf das Jahr klicke, wird die Tabelle nach Jahr gefiltert. Dann, wenn ich auch die Kategorie unter dem Jahr anklickte, wird es mit dem Jahr und so weiter filtern. Ich habe wirklich keine Idee, die API in Datenträgern anzupassen.

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>

oder Sie können aus verschiedenen Kontrollen müssen Filter mehrspaltigen, wie <a data-filer="year=xx&month=xx"></a>

oder Sie können

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>

Filter benötigen

oder komponieren diese bis

vorschlagen Verwendung mvvm (reagieren/Winkel/vue) für Ihr nächstes Projekt beschäftigen sie sich ui automatisch, Sie auf die Datenverarbeitung