Поиск / фильтрация данных в нескольких таблицах (включает JQuery)

Question

Может ли кто-нибудь помочь мне с этим:

У меня есть несколько таблиц, и я хочу преобразовать некоторые из них в таблицы данных (с помощью класса .dataTable). Внутри datatables есть определенные заголовки, которые должны быть доступны для поиска (в datatables. net означает - так что фактически фильтруется).

Следующий код отлично работает для первой таблицы, но не справится с задачей все они.

Как вы можете видеть, функция eventFunction применяется к каждому нужному столбцу, но вызывается только входами в первой таблице.

Я использую:

<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>

as импортирует этот скрипт:

$(document).ready(function(){
            var table = $('.dataTable').DataTable({
                "paging":false,
                "dom": 'lrtip',
            });
            $('table.dataTable > thead > tr > th.searchable').each(function () {
                $(this).html($(this).text() + '<br><input type="text" placeholder="" />');
            });
            table.columns().every(function () {
                console.log('apply function');
                var that = this;
                $('input', this.header()).on('keyup change clear', function (event) {
                    console.log('function called');
                    if (that.search() !== this.value) {
                        that.search(this.value).draw();
                    }
                    // event.stopPropagation();
                    // event.preventDefaults();
                    // event.stopImmediatePropagation();
                });
            });
        });

Вы можете использовать это как таблицу ссылок:

<table class="dataTable">
<thead>
    <tr>
        <th>col1</th>
        <th class="searchable">col2</th>
        <th>col3</th>
    </tr>
</thead>
<tbody>
    <tr><td>A1</td><td>A2</td><td>A3</td></tr>
    <tr><td>B1</td><td>B2</td><td>B3</td></tr>
    <tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>

<table class="dataTable">
<thead>
    <tr>
        <th>col1</th>
        <th class="searchable">col2</th>
        <th>col3</th>
    </tr>
</thead>
<tbody>
    <tr><td>A1</td><td>A2</td><td>A3</td></tr>
    <tr><td>B1</td><td>B2</td><td>B3</td></tr>
    <tr><td>C1</td><td>C2</td><td>C3</td></tr>
</table>

РЕДАКТИРОВАТЬ

с другой стороны, когда я проверяю поля ввода, кажется, что только первое из них имеет событие:

Если сб. знает, как предотвратить всплывающее событие, будет ли это оценено по достоинству :) в настоящее время, когда на вход поступает щелчок, также запускается сортировка (что должно происходить только при нажатии на саму кнопку, но не на вводе)