Fontawesome icons in Datatables colums but not in the search filter

Question

I have a problem with Datatables. I want to use Fontawesome icons in the cells, but I can't use the search filter function with icons.

jQuery didn't accept this code, my output in the select field is like that '">'

<i class="fa-solid fa-check text-success"></i> 

Here is my HTML Code

    <table class="table display" id="table">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">Vorname</th>
      <th scope="col">Nachname</th>
      <th scope="col">Tageszeit</th>
      <th scope="col">Mo</th>
      <th scope="col">Di</th>
      <th scope="col">Mi</th>
      <th scope="col">Do</th>
      <th scope="col">Fr</th>
      <th scope="col">Priorität</th>
    </tr>
  </thead>
  <tbody>
      <?php while($row = mysqli_fetch_array($query)) { 
          ?>
    <tr>
      <td><?php echo $row["id"]; ?></td>
      <td><?php echo $row["vorname"]; ?></td>
      <td><?php echo $row["nachname"]; ?></td>
      <td><?php echo $row["tageszeit"]; ?></td>
      <td><?php if($row["mo"] == 1) {?> <i class="fa-solid fa-check text-success"></i> <?php } else { ?> <i class="fa-solid fa-xmark text-danger"></i> <?php } ?></td>
      <td><?php if($row["di"] == 1) {?> <i class="fa-solid fa-check text-success"></i> <?php } else { ?> <i class="fa-solid fa-xmark text-danger"></i> <?php } ?></td>
      <td><?php if($row["mi"] == 1) {?> <i class="fa-solid fa-check text-success"></i> <?php } else { ?> <i class="fa-solid fa-xmark text-danger"></i> <?php } ?></td>
      <td><?php if($row["do"] == 1) {?> <i class="fa-solid fa-check text-success"></i> <?php } else { ?> <i class="fa-solid fa-xmark text-danger"></i> <?php } ?></td>
      <td><?php if($row["fr"] == 1) {?> <i class="fa-solid fa-check text-success"></i> <?php } else { ?> <i class="fa-solid fa-xmark text-danger"></i> <?php } ?></td>
      <td><?php echo $row["prioritaet"]; ?></td>
    </tr>
    <?php } ?>
  </tbody>
  <tfoot>
            <tr>
                <th>#</th>
                <th>Vorname</th>
                <th>Nachname</th>
                <th>Tageszeit</th>
                <th>Mo</th>
                <th>Di</th>
                <th>Mi</th>
                <th>Do</th>
                <th>Fr</th>
                <th>Priorität</th>
            </tr>
        </tfoot>
</table>

Here is the Code to use Datatables:

$(document).ready(function() {
    $('#table').DataTable( {
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
        }
    } );
} );

Answer 1

Perhaps you can store the name of the class in your database and have php echo the class inside the html code when you query it.