Быстрый поиск в таблице по сайте?

Question

[Юрий Ляпин]

Доброго времени суток, нужна Ваша помощь в написании быстрого поиска в таблице на сайте.

Есть таблица с данными на сайте

<?php error_reporting(1);
require_once 'admin/db.php';
$dbhost = $GLOBALS['dbhost'];
$dbuser = $GLOBALS['dbuser'];
$dbpass = $GLOBALS['dbpass'];
$dbname = $GLOBALS['dbname'];
$mysql = mysqli_connect("$dbhost","$dbuser","$dbpass","$dbname");
if (!$mysql) {echo '<div class="alert alert-danger container" role="alert">Отсутствуеь подключение к базе данных<br>'. mysqli_connect_error() .PHP_EOL.'</div>';}
$mysql->set_charset("utf8");
if($sql = mysqli_query ($mysql, "SELECT * FROM `users`")) {
    echo'<div class="container-sm mt-2">
            
            <table id="myTable" class="table table-striped table-hover" style="width:100%;text-align: center;">
            <thead class="thead-dark" style="text-align: center">
            <tr>
            <th>id</th>
            <th>Логин</th>
            <th>Пароль</th>
            <th >Имя</th>
            <th>Привелегии</th>
            <th></th>
            <th></th>
            </tr>
            </thead>
            <tbody>';

    while ($result = mysqli_fetch_array($sql))
    {
        echo '<tr>
        <td>' . $result['id'] . '</td>
        <td>' . $result['login'] . '</td>
        <td>' . $result['pass'] . '</td>
        <td>' . $result['name'] . '</td>
        <td>' . $result['user_privilege'] . '</td>
        <td><a href="/index.php" data-toggle="modal" data-target="#ModalEdit"><img src="images/edit.svg" class="img-fluid" alt="Редактировать" style="max-width: 50%;"> </a></td>
            <!-- ModalEdit -->
<div class="modal fade" id="ModalEdit" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalEditTitle">Редактировать</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success">Сохранить</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>
            <!-- ModalDell -->

<td><a href="admin/userdell.php?id='.$result['id'].'" data-toggle="modal" data-target="#ModalDellid'.$result['id'].'"><img src="images/del.svg" class="img-fluid" alt="Удалить" style="max-width: 50%;"> </a></td>
<form action="admin/userdell.php" method="get">
<div class="modal fade" id="ModalDellid'.$result['id'].'" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="ModalDellTitle">Удаление пользоватьеля "'.$result['name'].'"!</h5>

      </div>
      
      <div class="modal-body">

        Вы действительно хотите удалить пользователя "'.$result['name'].'" ?
      </div>
      <div class="modal-footer">
        <button class="btn btn-danger" type="submit">Удалить</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Отмена</button>
      </div>
    </div>
  </div>
</div>
</form>
</tr>

';}

}elseif (isset($sql)){echo '<div class="alert alert-danger" role="alert">Отсутствует база данных / указана неверно</div>';}
?>
</tbody>

</table>
</div>

Как написать поиск по типу: https://codepen.io/adobewordpress/pen/gbewLV
Использовал Результаты поиска DataTables, но у меня есть модальные окна и type="submit" не отрабатывают.
Структура таблицы выглядит так:

<table>
   <thead>
            <tr>
            <th>id</th>
            <th>Логин</th>
            <th>Пароль</th>
            <th >Имя</th>
            <th>Привелегии</th>
            <th></th>
            <th></th>
            </tr>
   </thead>
   <tbody>
         <tr>
        <td>данные из MySQL таблицы</td>
        <td>данные из MySQL таблицы</td>
        <td>данные из MySQL таблицы</td>
        <td>данные из MySQL таблицы</td>
        <td>данные из MySQL таблицы</td>
        <td>img</td>
        <td>img</td>
        </tr>
   </tbody>
</table>

Прошу Вашей помощи.
Сразу прошу прощения за код, пока так, потом поправим ))

Answer 1

[Арсений Матыцин]

пока так, потом поправим

Самообман, такой самообман)

К слову, не поверишь, но можно скопировать решение. Просто поправив классы, где надо. И то, не обязательно даже.

Впрочем, ИМХО, лучше для таких вещей задействовать JS-фреймворк типа Vue. Кроме того, что у них в документации подобного плана поиск приводится, как образец, так еще и в конечном счете это достаточно удобно.

Потому что раз уж пошла такая пляска с таблицами, то дальше будет еще веселее.