Как показать сообщение «запись не найдена». если в таблице нет записи, используя функцию фильтра jquery - PullRequest
Новая
       5

Как показать сообщение «запись не найдена». если в таблице нет записи, используя функцию фильтра jquery

1 голос
/ 25 октября 2019

Я хотел бы показать сообщение «Запись не найдена». если в таблице нет результатов после поиска. это jsfiddle https://jsfiddle.net/jclaude/yxs8v1a9/2/

HTML 

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

</head>
<body>

<h2>Filterable Table</h2>
<p>Type something in the input field to search the table for first names, last names or emails:</p>  
<input id="myInput" type="text" placeholder="Search..">
<br><br>

<table>
  <thead>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th>
    <th>Email</th>
  </tr>
  </thead>
  <tbody id="myTable">
  <tr>
    <td>John</td>
    <td>Doe</td>
    <td>john@example.com</td>
  </tr>
  <tr>
    <td>Mary</td>
    <td>Moe</td>
    <td>mary@mail.com</td>
  </tr>
  <tr>
    <td>July</td>
    <td>Dooley</td>
    <td>july@greatstuff.com</td>
  </tr>
  <tr>
    <td>Anja</td>
    <td>Ravendale</td>
    <td>a_r@test.com</td>
  </tr>
  </tbody>
</table>

<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>

</body>
</html>

jQuery 

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

CSS 

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

Я пытался найти эту функцию фильтрав JQuery, но, к сожалению, я не могу найти решение / похоже на мою проблему. Я также смотрю на документацию https://api.jquery.com/filter/

1 Ответ

2 голосов
/ 25 октября 2019

Попробуйте этот код ниже 

$(document).ready(function(){
  $("#myInput").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#myTable tr:not('.no-records')").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
    var trSel =  $("#myTable tr:not('.no-records'):visible")
    // Check for number of rows & append no records found row
    if(trSel.length == 0){
        $("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')
    }
    else{
        $('.no-records').remove()
    }

  });
});

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

Проверяет количество видимых строк: 

var trSel =  $("#myTable tr:not('.no-records'):visible")
trSel.length

Добавляет строку без записей: 

$("#myTable").html('<tr class="no-records"><td colspan="3">No record found.</td></tr>')

Удаляет строку, в которой нет записей 

$('.no-records').remove()
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...