CODEWITHSUNDEEP
javascriptphpjquerydatatable
RXD
RXD

Reputation: 98

Datatable Filter by external buttons/link

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

Prototype 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.

Upvotes: 1

Views: 685

Answers (1)

Josh Lin
Josh Lin

Reputation: 2437

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

Upvotes: 2

Related Questions