jQuery таблица поиска всех столбцов при вводе - PullRequest
Новая
       2

jQuery таблица поиска всех столбцов при вводе

1 голос
/ 17 апреля 2019

Привет, у меня есть поиск по таблице Jquery, и я должен, когда нажимаю Enter, чтобы искать по всем столбцам таблицы ... Сейчас я могу искать только по двум столбцам ... Может ли кто-нибудь помочь мне связать остальные, чтобы, когда нажмите введите всю таблицу будет искать.

ТАК, когда кто-то нажимает на кнопку ввода, мне нужен поиск по имени, электронной почте, телефону, цене

Ваша помощь приветствуется. 

<!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>williams@ooutlook.com</td>
					<td>644</td>
					<td>56453454</td>
				</tr>
				<tr>
					<td>Amber Samuels</td>
					<td>amber@james.com</td>
					<td>64345</td>
					<td>734534</td>
				</tr>
				<tr>
					<td>Rehen</td>
					<td>rehen@gmail.com</td>
					<td>634534</td>
					<td>5345</td>
				</tr>
				<tr>
					<td>Alfred fedric</td>
					<td>fedric@gmail.com</td>
					<td>634534</td>
					<td>123123</td>
				</tr>
				<tr>
					<td>Taylor</td>
					<td>taylor@gmail.com</td>
					<td>0978098</td>
					<td>896899</td>
				</tr>
				<tr>
					<td>Classis</td>
					<td>classic@fgf.com</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>

Ответы [ 3 ]

1 голос
/ 17 апреля 2019

вместо вашего jquery используйте код ниже, он будет работать для всех столбцов 

$(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>williams@ooutlook.com</td>
                <td>644</td>
                <td>56453454</td>
            </tr>
            <tr>
                <td>Amber Samuels</td>
                <td>amber@james.com</td>
                <td>64345</td>
                <td>734534</td>
            </tr>
            <tr>
                <td>Rehen</td>
                <td>rehen@gmail.com</td>
                <td>634534</td>
                <td>5345</td>
            </tr>
            <tr>
                <td>Alfred fedric</td>
                <td>fedric@gmail.com</td>
                <td>634534</td>
                <td>123123</td>
            </tr>
            <tr>
                <td>Taylor</td>
                <td>taylor@gmail.com</td>
                <td>0978098</td>
                <td>896899</td>
            </tr>
            <tr>
                <td>Classis</td>
                <td>classic@fgf.com</td>
                <td>634534</td>
                <td>45345</td>
            </tr>
        </tbody>
    </table>
</section>
0 голосов
/ 17 апреля 2019

Обновлен метод фильтров, добавлены индексы полей, в которых нужно искать 

var text = row.cells[nameRowIndex,emailRowIndex,2,3].textContent.toLowerCase(), val = currentMonth;
row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
0 голосов
/ 17 апреля 2019

Давайте предположим, что вы просто хотите иметь возможность поиска на любом этапе нахождения на странице, а не только на входе или в фокусе чего-то еще.

Используя jQuery, вы можете сделать следующее 

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

Если вы просто хотите иметь возможность поиска, в то время как вы сосредоточены на поисковой информации, вы можете сделать следующее 

$(window).keypress(function(e){
  if(e.charCode == 13 && $(".light-table-filter").is(":focus")){
    doSearch();
  }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...