数据表选择过滤器

Question

I'm trying to create custom filters for my datatable using <select>.

How can I make for when someone selects one of the options, the datatable display the items according to the selection without having to refresh the page?

DATATABLE CODE:

 $(document).ready(function() {
      $('#datatable').DataTable({
        "pagingType": "full_numbers",
        "lengthMenu": [
          [10, 25, 50, -1],
          [10, 25, 50, "Todas"]
        ],
        responsive: true,
        language: {
          search: "_INPUT_",
          searchPlaceholder: "Filtro", //Ignorem isso
        }


      });

      var table = $('#datatable').DataTable();

    });

how can I also do so that several options of the same value are not created?

Code:

<select class="form-control" placeholder="pais" name="pais">
<option selected >PAÍS</option>
<?php foreach ($resultado as $row) { ?>
<option value="<?=$row['pais']?>"> <?php echo $row['pais']; ?></option>
<?php } ?>
</select>
</div>

Result:

<select class="form-control" placeholder="pais" name="pais">
<option selected >PAÍS</option>
<option value="BRAZIL"> BRAZIL</option>
<option value="BRAZIL"> BRAZIL</option>
<option value="BRAZIL"> BRAZIL</option>
<option value="BRAZIL"> BRAZIL</option>
<option value="BRAZIL"> BRAZIL</option>
</select>

I select "BRAZIL", the datatable list all items with the country "BRAZIL".

More codes:

<?php
//error_reporting(0);
require_once("ct.php");
session_start();

$resultado = array(); 
$query = "SELECT * FROM infh";
$result = mysqli_query($connect, $query); 
$resultado = $result->fetch_all(MYSQLI_ASSOC);




<table id="datatable" class="table table-striped table-bordered" cellspacing="0" width="100%">
                  <thead>
                     <tr>
                        <th style="display:none;">ID</th>
                        <th>BIN</th>                         
                        <th>BANDEIRA</th>
                        <th>LEVEL</th>
                        <th>BANCO</th>                                             
                        <th>PAÍS</th>

                     </tr>
                  </thead>
                  <tfoot>
                     <tr>
                        <th style="display:none;">ID</th>
                        <th>BIN</th>
                        <th>BANDEIRA</th>
                        <th>LEVEL</th>
                        <th>BANCO</th>
                        <th>PAÍS</th>

                     </tr>
                  </tfoot>
                  <tbody>
                    <?php foreach ($resultado as $row) { ?>
                     <tr>
                        <td style="display:none;" class="id_<?=$row['id']?>"><?php echo $row['id']; ?></td>
                        <td class="seis_<?=$row['id']?>"><?php echo substr($row['pr'],0,6); ?></td>
                        <td class="bandeira_<?=$row['id']?>"><?php echo $row['bandeira']; ?></td>
                        <td class="level_<?=$row['id']?>"><?php echo $row['level']; ?></td>
                        <td class="banco_<?=$row['id']?>"><?php echo $row['banco']; ?></td>
                        <td class="pais_<?=$row['id']?>"><?php echo $row['pais']; ?></td>

                     </tr>
                     <?php } ?>
                  </tbody>
               </table>