JSFiddle - React, Tailwind, and code Playground

by CJBrewer

HTML

<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css">
<select size="1" id="types" name="types">
                    <option value="All" selected="selected">
                        All records
                    </option>
 
                    <option value="Info">
                        Information
                    </option>
 
                    <option value="Error">
                        Errors
                    </option>
                </select></td>

<button id='go'>Go</button>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Id</th>
                <th>Type</th>
                <th>Data</th>
                <th>Time</th>
            </tr>
        </thead>
 
        <tbody>
             <tr>
                <td>Tiger Nixon</td>
                <td>Error</td>
                <td>System Architect</td>
                <td>Time...</td>
            </tr>
            <tr>
               <td>555 Nixon</td>
                <td>Error</td>
                <td>System Architect</td>
                <td>Time...</td>
            </tr>
            <tr>
                <td>666 Nixon</td>
                <td>Info</td>
                <td>System Architect</td>
                <td>Time...</td>
            </tr>
            <tr>
              <td>777 Nixon</td>
                <td>Log</td>
                <td>System ArchAllitect</td>
                <td>Time...</td>
            </tr>
             <tr>
                <td>Tiger Nixon</td>
                <td>Error</td>
                <td>System Architect</td>
                <td>Time...</td>
            </tr>
            <tr>
               <td>555 Nixon</td>
                <td>Error</td>
                <td>System Architect</td>
                <td>Time...</td>
            </tr>
            <tr>
                <td>666 Nixon</td>
   ...

CSS

div.page
{
    background-color: RGBA(23,199,233,77);
}
div.table
{
background-color: RGBA(123,145,167,33);
}

JavaScript

$(document).ready(function () {

var table = $('#example').DataTable(
    {
        "dom": '<"table"<t><"page"p>>',
 //"paging":   false,
        "searching" : true,
        "ordering": false,
        "info":     false}
                                   );
   
    $('select#types').change( function() {
        if(this.value != "All")
        {
        	table.search(this.value).draw();
        }
        else            
        {
            	table.search("").draw();
        }
    });
    /*
    $('button#go').click( function() {
        var data = table.$('input, select').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 0, 120 )+'...'
        );
        return false;
    } );*/
} );