JSFiddle - React, Tailwind, and code Playground

by Nicholas Bridgemohan

HTML

<div class="row" id="dap_list">
			<div class="row">
				<div class="col-sm-2"><label>Filter:</label></div>
				<div class="col-sm-10"><input class="form-control search" placeholder="Search Criteria" value="effluent"/></div>
			</div>
			<div class="row">
				<div class="col-sm-2"><label>DAP Status:</label></div>
				<div class="col-sm-10">
					<label class="radio-inline"><input type="radio" class="search" name="search_radio" id="search_radio"
					                                   value="Awaiting Approval">Awaiting Approval
					</label>
					<label class="radio-inline"><input type="radio" class="search" name="search_radio" id="search_radio"
					                                   value="Needs Further Review">Needs Further Review
					</label>
					<label class="radio-inline"><input type="radio" class="search" name="search_radio" id="search_radio"
					                                   value="Approved">Approved
					</label>
				</div>
			</div>

			<table class="table table-striped table-responsive">
				<thead>
				<th class="sort asc desc" data-sort="waste_name">Waste</th>
				<th class="sort asc desc" data-sort="client_name">Client</th>
				<th class="sort asc desc" data-sort="created_by">Added By</th>
				<th class="sort asc desc" data-sort="timestamp">Date Added</th>
				<th class="sort asc desc" data-sort="dap_status">DAP Status</th>
				</thead>
				<tbody class="list">

        <tr>
          <td class="waste_name">Industrial Effluent</td>
          <td class="client_name">Organization2</td>
          <td class="created_by">No session</td>
          <td class="timestamp">2016-01-14 15:24:32</td>
          <td class="dap_status">Needs Further Review</td>
        </tr>
        <tr>
          <td class="waste_name">Oily Water</td>
          <td class="client_name">Test1</td>
          <td class="created_by">Nick</td>
          <td class="timestamp">2016-01-14 16:42:27</td>
          <td class="dap_status">Awaiting Approval</td>
        </tr>
       ...

JavaScript

var dap_list = new List('dap_list', {
			valueNames: ['waste_name', 'client_name', 'created_by', 'timestamp', 'dap_status'],
			page: 8,
			plugins: [
				ListPagination({})
			]
		});

		$('#search_radio').change(function () {
			var selection = this.value;

			// filter items in the list
			dap_list.filter(function (item) {
				if (item.values().search_radio == selection) {
					return true;
				} else {
					return false;
				}
			});

		});