CODEWITHSUNDEEP
jquerysearchhtml-table
user3548793
user3548793

Reputation: 35

jQuery table search all columns when enter

Hi I have a Jquery Table Search and My requirement is to when click enter to search all the table columns... Right now I can Search only two columns... Can someone please help me to bind the rest so that when click enter the entire table will search.

SO basically when some one hits enter I need search by, Name, Email, Phone, Price

Your help is appreciated. 

<!DOCTYPE html>

<html>

<head>
    
    <meta charset="UTF-8" />
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Table search on enter</title> 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>            

    <style>
        td,tr, th{
            padding:15px;
        }        
    </style>
      
    
</head>

<body>

    <input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" /> 
    
    <a class="button"><i class="fa fa-exclamation-circle"></i> Report Error</a>
               
    <br />
    
        <section class="table-box">
		<table class="order-table">
			<thead>
				<tr>
					<th>Name</th>
					<th>Email</th>
					<th>Phone</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Williams</td>
					<td>[email protected]</td>
					<td>644</td>
					<td>56453454</td>
				</tr>
				<tr>
					<td>Amber Samuels</td>
					<td>[email protected]</td>
					<td>64345</td>
					<td>734534</td>
				</tr>
				<tr>
					<td>Rehen</td>
					<td>[email protected]</td>
					<td>634534</td>
					<td>5345</td>
				</tr>
				<tr>
					<td>Alfred fedric</td>
					<td>[email protected]</td>
					<td>634534</td>
					<td>123123</td>
				</tr>
				<tr>
					<td>Taylor</td>
					<td>[email protected]</td>
					<td>0978098</td>
					<td>896899</td>
				</tr>
				<tr>
					<td>Classis</td>
					<td>[email protected]</td>
					<td>634534</td>
					<td>45345</td>
				</tr>
			</tbody>
		</table>
	</section>
    
    
    <script>
       // Can search only two columns I want to search all columns
    var currentMonth;
    var nameRowIndex = 0; // O is first column Name
    var emailRowIndex = 1; // 1 is Second column Email    
    
    $('.light-table-filter').change(function(){
       //The Event for Month change. 
       currentMonth =  $('.light-table-filter').val();
       changeData();
    });

    function changeData(){ 
            var tables = document.getElementsByClassName('order-table');//Table Name goes here..
            [].forEach.call(tables, function(table) {
                    [].forEach.call(table.tBodies, function(tbody) {

                            [].forEach.call(tbody.rows, _filter);

                    });
            });
    }
    
    function _filter(row) {
    console.log("row: " + row.cells[nameRowIndex,emailRowIndex].textContent);
            var text = row.cells[nameRowIndex,emailRowIndex].textContent.toLowerCase(), val = currentMonth;
            row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
    } 
    </script>    
    
</body>

</html>

Upvotes: 1

Views: 2900

Answers (3)

Udhay Titus
Udhay Titus

Reputation: 5869

instead of your jquery use below code it will works for all column

$(document).ready(function(){
  $(".light-table-filter").keypress(function (e) {
  var key = e.which;
   if(key == 13)  // the enter key code
  {    
    var value = $(this).val().toLowerCase();
    $(".order-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });  
  }
  });
});


// Can search only two columns I want to search all columns
$(document).ready(function(){
  $(".light-table-filter").keypress(function (e) {
  var key = e.which;
   if(key == 13)  // the enter key code
  {    
    var value = $(this).val().toLowerCase();
    $(".order-table tbody tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });  
  }
  });
});


/*var currentMonth;
var nameRowIndex = 0; // O is first column Name
var emailRowIndex = 1; // 1 is Second column Email
var phoneRowIndex = 2;
var priceRowIndex = 3;

$('.light-table-filter').change(function(){
   //The Event for Month change. 
   currentMonth =  $('.light-table-filter').val();
   changeData();
});

function changeData(){ 
        var tables = document.getElementsByClassName('order-table');//Table Name goes here..
        [].forEach.call(tables, function(table) {
                [].forEach.call(table.tBodies, function(tbody) {

                        [].forEach.call(tbody.rows, _filter);

                });
        });
}

function _filter(row) {
        var text = row.cells[nameRowIndex,emailRowIndex,phoneRowIndex,priceRowIndex].textContent.toLowerCase(), val = currentMonth;
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
}*/
   td,tr, th{
        padding:15px;
    }       
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="search" class="light-table-filter" data-table="order-table" placeholder="Filtrer" /> 

<a class="button"><i class="fa fa-exclamation-circle"></i> Report Error</a>

<br />

    <section class="table-box">
    <table class="order-table">
        <thead>
            <tr>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Price</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Williams</td>
                <td>[email protected]</td>
                <td>644</td>
                <td>56453454</td>
            </tr>
            <tr>
                <td>Amber Samuels</td>
                <td>[email protected]</td>
                <td>64345</td>
                <td>734534</td>
            </tr>
            <tr>
                <td>Rehen</td>
                <td>[email protected]</td>
                <td>634534</td>
                <td>5345</td>
            </tr>
            <tr>
                <td>Alfred fedric</td>
                <td>[email protected]</td>
                <td>634534</td>
                <td>123123</td>
            </tr>
            <tr>
                <td>Taylor</td>
                <td>[email protected]</td>
                <td>0978098</td>
                <td>896899</td>
            </tr>
            <tr>
                <td>Classis</td>
                <td>[email protected]</td>
                <td>634534</td>
                <td>45345</td>
            </tr>
        </tbody>
    </table>
</section>

Upvotes: 1

Chizzele
Chizzele

Reputation: 292

Let's assume that you just want to be able to search at any stage of being on the page, not just in an input or on focus of something else.

Using jQuery you can do the following 

$(window).keypress(function(e){
  if(e.charCode == 13){ //charCode 13 is the enter key
    doSearch();
  }
});

If you just want to be able to search whilst you are focused on the search input you can do the following

$(window).keypress(function(e){
  if(e.charCode == 13 && $(".light-table-filter").is(":focus")){
    doSearch();
  }
});

Upvotes: 0

Saqib A. Azhar
Saqib A. Azhar

Reputation: 1074

Update filters method, add indexes of fields you need to be searched

var text = row.cells[nameRowIndex,emailRowIndex,2,3].textContent.toLowerCase(), val = currentMonth;
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

Upvotes: 0

Related Questions