JSFiddle - React, Tailwind, and code Playground

by mparvez1986

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<div class="container-fluid">
    <div class="col-sm-12">
        <div class="card">
            <table border="0" cellpadding="5">
                <tbody>
                    <tr>
                        <td>Minimum age:</td>
                        <td>
                            <input type="text" id="min" name="min">
                        </td>
                        <td>Maximum age:</td>
                        <td>
                            <input type="text" id="max" name="max">
                        </td>
                    </tr>
                </tbody>
            </table>

            <div class="table-responsive">
                <div>
                    <table id="example" class="display" style="width:100%">
                        <thead>
                            <tr>
                                <th>col 1</th>
                                <th>col 2</th>
                                <th>col 3</th>
                                <th>AGE</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>data 11</td>
                                <td>data 12</td>
                                <td>data 13</td>
                                <td>24</td>
                            </tr>
                            <tr>
                                <td>data 21</td>
                                <td>data 22</td>
                                <td>data 23</td>
                                <td>52</td>
                            </tr>
                            <tr>
                                <td>data 31</td>
            ...

JavaScript

/* Custom filtering function which will search data in column four between two values */
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);

//This below code is working
$.extend($.fn.dataTable.defaults, {
       //"scrollY": 5,
       "dom":"T"
    });


 $.fn.dataTableExt.aoFeatures.push({
        "fnInit": function (settings) {
            var setting = $.fn.dataTable.defaults;
            setting.scrollY = 5;
            console.log(setting)
            return setting
          },
        "cFeature": "T"
    });

// not executing
$.fn.dataTable.ext.feature.push({
        fnInit: function (oSettings) {
           console.log(oSettings)
           oSettings.oScroll.sY = 5;
           console.log(oSettings.oScroll)
          // var settings = new $.fn.dataTable.settings();
           return oSettings; // input element
        },
        cFeature: 'T1'
    });

//below is not working

 
$(document).ready(function() {
    var table = $('#example').DataTable({
    	//"dom":"T"
    });
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );