Only display rows containing "Tokyo" in the third column (with a selcet tag) - jsfiddle provided.

Only display rows containing "Tokyo" in the third column (with a selcet tag) - jsfiddle provided.

kjemmokjemmo Posts: 3Questions: 1Answers: 0

Hi.

Jsfiddle here: https://jsfiddle.net/kjemmo/3hu29o7g/

I am looking for a way to filter a table with a select dropdown. I have created the table and used Custom toolbar elements to add the select tag and options.

The goal is to filter the table with the select dropdown, so that when Tokyo is selected only rows that contain Tokyo in the third column is displayed. Like in this mockup.

I need help getting the javascript to work and are unsure what the best approach is. If some one can provide a fork of the jsfiddle with a working example I will be thanksful.

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    Hi @kjemmo ,

    Yep, you just need to call column().search() with the value in the dropdown whenever it changes.

    Cheers,

    Colin

  • kjemmokjemmo Posts: 3Questions: 1Answers: 0

    @colin

    Thanks. I am not the best at javascript, so if anyone have time to show me a working example I will be greatful.

    Thanks.

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    You could use this example as a template, it's showing how to search for values within a dropdown.

  • kjemmokjemmo Posts: 3Questions: 1Answers: 0

    Thanks @colin !

This discussion has been closed.