Need assistance with front-end filters(searches)

crwdzr

I am having trouble fully understanding if the search API is what I need to achieve the desired effect I'm after.

Suppose I've got this HTML:

<div class="ui form">
    <div class="fields filters">

        <div class="field">
            <label>Status</label>
            <select filter-type="status">
                <option value="any" selected>any</option>
                <option value="active">active</option>
                <option value="unknown">unknown</option>
                <option value="inactive">inactive</option>
            </select>
        </div>

        <div class="field">
            <label>name</label>
            <input type="text" filter-type="name">
        </div>

        <div class="field">
            <label>age</label>
            <select filter-type="age">
                <option value="1">less than 20</option>
                <option value="2">greater than 20</option>
                <option value="3" selected>any</option>
            </select>
        </div>

    </div>
</div>

<table id="example" class="ui striped selectable celled table">
    <thead>
        <th>id</th>
        <th>name</th>
        <th>age</th>
        <th>status</th>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>bob</td>
            <td>22</td>
            <td>active</td>
        </tr>
        <tr>
            <td>2</td>
            <td>billy</td>
            <td>22</td>
            <td>active</td>
        </tr>
        <tr>
            <td>3</td>
            <td>bobby</td>
            <td>25</td>
            <td>unknown</td>
        </tr>
    </tbody>
</table>

and this script to initialize it:

$(function(){
        var table = $('#example').DataTable({
            'columns': [
                {
                    data: 'id', 
                }, 
                {
                    data: 'name', 
                }, 
                {
                    data: 'age', 
                }, 
                {
                    data: 'status', 
                }, 
            ]
        })
        $('.filters input,select').on('change', function() {
            let that = $(this)
            let type = that.attr('filter-type')
            let value = that.val()

            // what to do from here ?
            // . . .
        })
    })

I've defined three inputs.
- A select for an age being > or < to a value
- An input for a text field (which should do string matching only when it isn't empty)
- A status dropdown that can match to a value or a not-value or be ignored alltogether for the 'any' value.

I am not worried so much about the code that would have to go in my filters .on('change') listener to handle determining which filter was selected, but rather what would have to be called to DataTables to actually apply one of these individually or any undetermined amount of these.

In the past, I would send this to the server to pre-process the data for datatables, even if it's set to not use serverside processing. I would like to move this to the front end for more responsive experiences (this would be applied to relatively small tables, <2000 rows).

From what I am understanding (and from what I've searched):
- Filtering is not for changing what displays on the table, but allows you to run custom functions
- Searching is for changing what rows show in the table, but only supports string/regex searches
- Regex is theoretically capable of matching not-values but is not a good choice for them or ranges

What would be the best option for applying those 3 filters (e.g. age, status, name) or any other number of filters where the desired search algorithm would have to change (regex, ranges, whatever else you can think up) based on what column it's in?

MrNazgul

I've implemented some complex combined filtering behavior by extending DataTables' search functionality:

$.fn.dataTable.ext.search.push(
  function( settings, data, dataIndex ) {
    //your code here
});

If you search the forum there are several related posts that should get you on your way.

crwdzr

thanks, for anyone who might have the same situation as me, this is how I solved it:

when I change one of the input/selects, this function runs:

updateFilters: _=> {
    let filters = []

    // logic to start pushing each individual 
    // filter into filters [] goes here

    applyFilters(filters)
},

applyFilters: functions => {
    $.fn.dataTable.ext.search = []

    functions.forEach(fn => {
        let thisFilter = (settings, data, dataIndex, row) => fn(row) 
        $.fn.dataTable.ext.search.push(thisFilter)
    })

    table.draw(false)
},