Click on element to filter column in javascript (datatables)

Question

I am using javascript DataTables to display data, and would like to modify filters by clicking on data items as well as the standard menus. For example, I have a table like this (obviously not including the javascript functions necessary to filter):

<table>
    <thead>
        <th>name</th>
        <th>number</th>
    </thead>
    <tbody>
        <tr>
            <td>Bob</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Sue</td>
            <td>5</td>
        </tr>
        <tr>
            <td>Sue</td>
            <td>2</td>
        </tr>
        <tr>
            <td>Bob</td>
            <td>1</td>
        </tr>
        <tr>
            <td>Frank</td>
            <td>5</td>
        </tr>
    </tbody>
</table>

If the viewer clicks on 'Bob', I want the filter to be updated to only display rows containing 'Bob'.

Answer 1

Use ColumnFilterWidgets or ColumnFilter .

There are examples, snippets and docs in those pages. I hope it helps.