JSFiddle - React, Tailwind, and code Playground

by perfectnoob

HTML

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">
<input type="radio"  name="radiocheck" id="button1" />
<label for="button1">Without SC</label>
<input type="radio" name="radiocheck"  id="button2" /> 
<label for="button2">Only With SC</label>
<button id="reset">Reset</button>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Model No</th>
                <th>Part Number</th>
                <th>Description</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>AB1234</td>
                <td>23879-09</td>
                <td>This Model Comes With A SC</td>
            </tr>
            <tr>
                <td>AB1235</td>
                <td>23869-19</td>
                <td>This is a normal Model</td>
            </tr>
            <tr>
                <td>CBZ001</td>
                <td>23869-01</td>
                <td>This is a custom made model which has SC</td>
            </tr>
            <tr>
                <td>INR081</td>
                <td>33869-02</td>
                <td>A standard model which can be customized</td>
            </tr>
            <tr>
                <td>HBR01</td>
                <td>73823-01</td>
                <td>Highly customizable SC model</td>
            </tr>
             <tr>
                <td>YZFR1</td>
                <td>88820-001</td>
                <td>Manufactured only on request. Equipped with SC</td>
            </tr>
            <tr>
                <td>YZFR15</td>
                <td>11120-001</td>
                <td>Mid variant</td>
            </tr>
             <tr>
                <td>YPFV250</td>
                <td>25093-101</td>
                <td>Top End</td>
            </tr>
        </tbody>
    </table>

JavaScript

$(document).ready(function() {
    var filters = {
        sc: {active: false, re: new RegExp("\\bSC\\b", "i"), include: true}
    };
    
    $.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
        if(!filters.sc.active) return true;
        
        var includes_sc = filters.sc.re.test(data[2]);
        return (filters.sc.include ? includes_sc : !includes_sc);
    });
    
    var table = $('#example').DataTable();
    table.draw(); // probably not needed...
		
		$("#button1").click(function(event) {
      filters.sc.include = false;
      filters.sc.active = true;
      table.draw();
    });
    
    $("#button2").click(function(event) {
      filters.sc.include = true;
      filters.sc.active = true;
      table.draw();
    });
    
    $("#reset").click(function(event) {
      document.getElementById("button1").checked=false;
      document.getElementById("button2").checked=false;
      $("#example_filter").val("");
      filters.sc.active = false;
      table.draw();
    });
});