JSFiddle - React, Tailwind, and code Playground

by Nicolás Pardo

HTML

<script src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.6/css/jquery.dataTables.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.js"></script>
<button id='delete'>Delete from table 1</button>
<table border="0" cellpadding="5" cellspacing="5">
                                        <tbody><tr>
                                            <td>Minimum salary:</td>
                                            <td><input id="min" name="min" type="text"></td>
                                        </tr>
                                        <tr>
                                            <td>Maximum salary:</td>
                                            <td><input id="max" name="max" type="text"></td>
                                        </tr>
                                    </tbody></table>
                                    <table id="list" cellspacing="0" width="100%" class="table table-bordered table-display" data-info="true" data-search="true" data-paginate="true">
                                        <thead>
		<tr>
			<th>Nombre</th>
			<th>Apellido</th>
			<th>Email</th>
			<th>Ventas</th>
			<th>Action</th>
		</tr>
	</thead>
	<tbody>
    	<tr>
			<td>John 1</td>
			<td>Doe</td>
			<td>[email protected]</td>
			<td class="center">1</td>
			<td class="center"><a href="#"><i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i></a></td>
		</tr>        
    	<tr>
			<td>John 2</td>
			<td>Doe</td>
			<td>[email protected]</td>
			<td class="center">5</td>
			<td class="center"><a href="#"><i class="ui-tooltip fa fa-pencil" style="font-size: 22px;" data-original-title="Edit"></i></a></td>
		</tr>           	<tr>
			<td>John </td>
			<td>Doe</td>
			<td>[email protected]</td>
			<td class="center">10</td>
			<td...

CSS

.row_selected{background-color: #FF9 !important; z-index:9999;}

JavaScript

var oTable;
oTable = $('#list').DataTable( );

    $("#list tbody tr").click( function( e ) {
        if ( $(this).hasClass('row_selected') ) {
            $(this).removeClass('row_selected');
        }
        else {
            oTable.$('tr.row_selected')//.removeClass('row_selected');
            $(this).addClass('row_selected');
        }
    });

    $('#delete').click( function() {
        var anSelected = fnGetSelected( oTable );
        for (var i = 0; i < anSelected.length; i++) {
            oTable.fnDeleteRow(anSelected[i]);
        };
    } );

	$('#min, #max').keyup( function() {
		oTableList.fnDraw();
	} );


	$.fn.dataTable.ext.search.push(
		function( settings, data, dataIndex ) {
			var min = parseInt( $('#salaryMin').val(), 10 );
			var max = parseInt( $('#salaryMax').val(), 10 );
			var salary = parseFloat( data[3] ) || 0; 	 
			if ( ( isNaN( min ) && isNaN( max ) ) ||
				 ( isNaN( min ) && salary <= max ) ||
				 ( min <= salary   && isNaN( max ) ) ||
				 ( min <= salary   && salary <= max ) )
			{
				return true;
			}
			return false;
		}
	);