iamDevlin iamDevlin - 7 months ago 7
PHP Question

Filter table using jQuery by column instead of row

Table goes like this. And my goal is to only show the area that is equals to what is inputted in the search box.

|Stage|Area|Part|
| A | 1 | 1 |
| A | 1 | 2 |
| A | 1 | 3 |
| A | 2 | 1 |
| A | 2 | 2 |
| A | 2 | 3 |
| A | 3 | 1 |
| A | 3 | 2 |
| A | 3 | 3 |


I'm currently following this code. There's also a demo on that site. But if type in 3 in the search box it goes like this:

|Stage|Area|Part|
| A | 1 | 3 |
| A | 2 | 3 |
| A | 3 | 1 |
| A | 3 | 2 |
| A | 3 | 3 |


I don't know how to make the jQuery search by column and give the result below:

|Stage|Area|Part|
| A | 3 | 1 |
| A | 3 | 2 |
| A | 3 | 3 |


I'm an amateur in jquery so please bear with me.

Table markup:

<input type="text" id="search"/>

<table width="100%" id="tblData">
<!-- Cells here -->
</table>


jQuery

$(document).ready(function()
{
$('#search').keyup(function()
{
searchTable($(this).val());
});
});

function searchTable(inputVal)
{
var table = $('#tblData');
table.find('tr').each(function(index, row)
{
var allCells = $(row).find('td');
if(allCells.length > 0)
{
var found = false;
allCells.each(function(index, td)
{
var regExp = new RegExp(inputVal, 'i');
if(regExp.test($(td).text()))
{
found = true;
return false;
}
});
if(found == true)$(row).show();else $(row).hide();
}
});
}

Answer

I wrote something like this a while back that should do what you need:

http://codepen.io/chrissp26/pen/vnxdt

The example above is set to search on the first two columns of the table. This is done by passing an array of column numbers as a parameter i.e column 1 would be 1:

initLiveFilter(element, [1,2]);

If you type "hitch" into the search field for example, it will return all hitch hikers books. If you type "book" it will match all rows that are either book or audio book.

Your Example


The snippet below more closely matches your example (with a few extra rows for dramatic effect). Here you can search on the second column (area) only.

To make this work for you, just pass the table element and the columns you want to index through to the initLiveFilter(liveFilter, columnsToIndex); function call.

jQuery(document).ready(function(e) {

var columnsToIndex = [2], // first column is 1
	liveFilter = jQuery("#liveFilter");

initLiveFilter(liveFilter, columnsToIndex);
});

// Live Filter
function initLiveFilter(liveFilter, columnsToIndex) {

if (typeof liveFilter !== "undefined" && liveFilter.length > 0) {
	
	liveFilter.wrap('<div class="liveFilter"></div>').parent().prepend('<div class="liveFilterContainer"><div class="group"><input type="text" class="liveFilterInput" value="" placeholder="Filter by Area" /><a href="#" class="clearField" title="Clear Filter">x</a></div></div><div class="noResults"><strong>Sorry.</strong> There is no match for your filter; please try again.</div>');
	
	var	thisObj = this,
		liveFilterWrapper = liveFilter.parent(),
		liveFilterField = liveFilterWrapper.find("input.liveFilterInput"),
		liveFilterGrid = jQuery("#liveFilter"),
		liveFilterGridRows = liveFilterGrid.find("tr:gt(0)"), // gt(0) prevents the first row (normally a TH) from being included.
		liveFilterClear = liveFilterWrapper.find(".clearField"),
		liveFilterNoResults = liveFilterGrid.prev(),
		liveFilterDataArray = [],
	
		//Create an array and populate it with key codes that should not cause shake effects

		characterValidationArray = [8,45,46], //backspace, insert, delete
	
		//Create an array and populate it with key codes that don't trigger an action
	
		characterExclusionArray = [13,20,27,33,34,37,39,35,36,16,17,18,144,145]; // enter, caps, esc, page up, page down, left, right, home, end, shift, ctrl, alt, num lock, scroll lock

	thisObj.init = function(){
		
		if (typeof columnsToIndex !== "undefined" && columnsToIndex.length > 0) {
			
			for (col=0; col<=columnsToIndex.length-1; col++)
			{			
				liveFilterGridRows.children("td:nth-child(" + columnsToIndex[col] + ")").each(function(i){
				
					liveFilterDataArray[liveFilterDataArray.length++] = jQuery(this).text();
				
				});
			}
			
		} else {
			
			liveFilterGridRows.children("td:first-child").each(function(i){
				
				liveFilterDataArray[i] = jQuery(this).text();
				
			});
		}
	
		liveFilterField.on("keyup",function(key){
			
			thisObj.filterRows(key);
			
		});
		
		liveFilterClear.on("click",function(){
	
			thisObj.clearField();
			
			return false;		
		});			
	};
	
	thisObj.clearField = function() {
	
		liveFilterField.val('');
		liveFilterClear.fadeOut(300);
		liveFilterNoResults.slideUp(300);
		liveFilterGridRows.show();
		liveFilterGrid.show();			
	};
	
	thisObj.filterRows = function(key) {
	
		if (jQuery.inArray(key.keyCode,characterExclusionArray) === -1) {
		
			var	liveFilterValue = liveFilterField.val();

			if (liveFilterValue !== "") {

				liveFilterClear.fadeIn(300);

				rowsToShow = [];
				
				var currentRow = 0;
				
			// Check the value entered against a regular expression matched with the column data. If a match exists add the row to a new array

				for (var i=0; i < liveFilterDataArray.length; i+=1) {

					RE = eval("/" + liveFilterValue + "/i");
	
					if (liveFilterDataArray[i].match(RE)) {
						
						rowsToShow.push(currentRow);
						
					}
					
					if(currentRow < liveFilterGridRows.length - 1) {

						currentRow++;
						
					} else {

						currentRow = 0;

					}
				}
			
			// If there are matches, show the grid, hide all the rows and show the selected ones

				if (rowsToShow.length > 0) {

					liveFilterGrid.show();
					liveFilterGridRows.hide();
					
					if (liveFilterNoResults.is(":visible")) {
						liveFilterNoResults.slideUp(150);
					}
					
					for (var i=0; i < rowsToShow.length; i+=1) {

						jQuery(liveFilterGridRows.get(rowsToShow[i])).show();

					}
					
			// If there are NO matches we hide the grid and display an error panel. If an incorrect value is entered while the error panel is visible it shakes itself assuming if it doesn't match any of the excluded values defined in the characterValidationArray
					
				} else {
					
					liveFilterGrid.hide();

					// if the no results panel is shown and the effects queue length is 0 and there are no illegal character presses
											
					if (liveFilterNoResults.is(":visible") && liveFilterNoResults.queue().length === 0 && jQuery.inArray(key.keyCode,characterValidationArray) == -1) {
						
						liveFilterNoResults.effect('shake', {times:3, distance:3}, 100);

					} else {
						liveFilterNoResults.slideDown(150);	
					}
				}
				
			// If the value entered is blank, hide the clear field button, show the grid and all of its rows and hide the no results panel if it is visible
			
			} else {

				thisObj.clearField();
			}
		}		
	};
	
	thisObj.init();
}
}
.liveFilter {
	width: 400px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	background: #fff;
}
.liveFilter .liveFilterContainer {
	border: solid 1px #ccc;
	background: #f5f5f5;
	overflow: hidden;
	padding: 6px;
}
.liveFilter .liveFilterContainer .group {
	position: relative;
	float: left;
}
.liveFilter .liveFilterContainer .liveFilterInput {
	border: solid 1px #ccc;
	padding: 4px 30px 4px 4px;
	color: #666;
	margin: 0;
	outline: 0;
}
.liveFilter .liveFilterContainer .liveFilterInput.default {
	color: #ccc;
	font-style: italic;
}
.liveFilter .liveFilterContainer .clearField {
	background: #80bce8;
	width: 18px;
	padding: 0 6px 3px 6px;
	color: #fff;
	text-decoration: none;
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	text-align: center;
	right: -29px;
}
.liveFilter .liveFilterList {
	width: 400px;
	border: solid 1px #ccc;
	border-top: 0;
  border-collapse: collapse;
}
.liveFilter .liveFilterList tr th:first-child,
.liveFilter .liveFilterList tr td:first-child {
	padding-left: 5px;	
}
.liveFilter .liveFilterList tr th {
	text-align: left;
	padding: 3px 0;
}
.liveFilter .liveFilterList tr td {
	border-top: solid 1px #eee;
	padding: 3px 0;
	color: #333;
}
.liveFilter .noResults {
	display: none;
	padding: 10px;
	color: #fff;
	background: #982929;
}


/* For aesthetics only */
				
body {
	margin: 10px;
	font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="liveFilter" class="liveFilterList" border="0">
<tbody>
	<tr>
		<th>Stage</th>
		<th>Area</th>
		<th>Part</th>
	</tr>
	<tr>
		<td>A</td>
		<td>1</td>
		<td>1</td>
	</tr>
	<tr>
		<td>A</td>
		<td>1</td>
		<td>2</td>
	</tr>
	<tr>
		<td>A</td>
		<td>1</td>
		<td>3</td>
	</tr>
	<tr>
		<td>A</td>
		<td>1</td>
		<td>4</td>
	</tr>
	<tr>
		<td>A</td>
		<td>1</td>
		<td>5</td>
	</tr>
	<tr>
		<td>A</td>
		<td>2</td>
		<td>1</td>
	</tr>
	<tr>
		<td>A</td>
		<td>2</td>
		<td>2</td>
	</tr>
	<tr>
		<td>A</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>A</td>
		<td>2</td>
		<td>4</td>
	</tr>
	<tr>
		<td>A</td>
		<td>2</td>
		<td>5</td>
	</tr>
	<tr>
		<td>A</td>
		<td>3</td>
		<td>1</td>
	</tr>
	<tr>
		<td>A</td>
		<td>3</td>
		<td>2</td>
	</tr>
	<tr>
		<td>A</td>
		<td>3</td>
		<td>3</td>
	</tr>
	<tr>
		<td>A</td>
		<td>3</td>
		<td>4</td>
	</tr>
	<tr>
		<td>A</td>
		<td>3</td>
		<td>5</td>
	</tr>
</tbody>
</table>

Comments