Datables - скрыть данные до поиска

Question

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

Моя таблица примеров ниже:

<script>
    $(document).ready(function() {
        $('#example').DataTable( {
            responsive: true
        } );
    } );
</script>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th class="none">Branch</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Test 1</td>
            <td>Test test test</td>
            <td>ABC</td>
        </tr>
        <tr>
            <td>Test 2</td>
            <td>Test test test</td>
            <td>DEF</td>
        </tr>
        <tr>
            <td>Test 3</td>
            <td>Test test test</td>
            <td>GHI</td>
        </tr>          
    </tbody>    
</table>

Answer 1

Да, это можно сделать с помощью вызова ajax, и я полагаю, вы используете php. Например, вы можете генерировать таблицу каждый раз, когда нажимаете любой символ, заполняя таблицу результатами или используя кнопку для поиска ключевого слова, которое вы вводите в поле ввода. Пример с ajax и php:

var search_string = $('#id_of_the_input_box').val();
$.ajax({
    url:"php_file.php",
    method:"POST",
    data:{action:action},
    dataType:"json",
    success:function(data){
    console.log(data);
}

и код php с использованием PDO

$search_string = $_POST["string"];
$result = '';
$query = $connection->prepare(" select * from table where name = '%".search_string."' ";
$query->execute();
$query_results->query->fetchAll;
if($query->rowCount() > 0) {
   $result = '
         <script>
            $(document).ready(function() {
               $('#example').DataTable( {
                  responsive: true
               });
            });
            <table id="example" class="display" style="width:100%">
              YOUR TABLE ROWS HERE
            </table>
   ';

   // foreach loop to populate the table example
   foreach ($query_results as $row) {
        $result.= '
            <tr>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
              <td>'.$row["table_column_name_1"].'</td>
        '
   } else {
            echo "No results";
          }
}

// echo the generated table as ajax response
echo $result;

Надеюсь, вы поняли идею с этим примером.