数据表按外部按钮/链接过滤

Question

I'm trying to filter the searching of my table using a treeview type of buttons/links beside my table. This is the design:

Here's the tricky part. So when I click the year, the table will filter by year. Then if I also clicked the category below the year it will filter with the year and so forth. I really don't have any idea customizing the API in datatables.

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>

or you may need filter multi-column, like <a data-filer="year=xx&month=xx"></a>

or you may need filter from different controls

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>

or compose these up

suggest use mvvm(react/angular/vue) for your next project, they deal ui automaticly, you can focus on data handling

</div>