JSFiddle - React, Tailwind, and code Playground

by mgutbor

JavaScript

'use strict';
     
    //----------------------------------------------
    //Example on how to define a custom filter function
    //this function is goinf to be passesd to yadcf as custom_func parameter value
    //and going to be tested against each value in the column
    //----------------------------------------------
 
    function myCustomFilterFunction(filterVal, columnVal) {
        var found;
        if (columnVal === '') {
            return true;
        }
        switch (filterVal) {
        case 'happy':
            found = columnVal.search(/:-\]|:\)|Happy|JOY|:D/g);
            break;
        case 'sad':
            found = columnVal.search(/:\(|Sad|:'\(/g);
            break;
        case 'angry':
            found = columnVal.search(/!!!|Arr\.\.\./g);
            break;
        case 'lucky':
            found = columnVal.search(/777|Bingo/g);
            break;
        case 'january':
            found = columnVal.search(/01|Jan/g);
            break;
        default:
            found = 1;
            break;
        }
 
        if (found !== -1) {
            return true;
        }
        return false;
    }
     
    //----------------------------------------------
    //note that this is the old yadcf API for init the filters 
    //new init function should be used when working with new Datatable (capital "D" API)
    //for new init function see: http://yadcf-showcase.appspot.com/DOM_Ajax_Multiple_1.10.html
    //----------------------------------------------
    oTable = $('#example').dataTable({
        "sScrollY": "300px",
        "iDisplayLength": 25,
        "bJQueryUI": true,
        "bStateSave": true
    }).yadcf([{
        column_number: 0,
        filter_type: 'custom_func',
        custom_func: myCustomFilterFunction,
        data: [{
            value: 'happy',
            label: 'Happy'
        }, {
            value: 'sad',
            label: 'Sad'
        }, {
            value: 'angry',
            label: 'Angry'
        },...