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 ></i> 

Here is my HTML Code

    <table  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 ></i> <?php } else { ?> <i ></i> <?php } ?></td>
      <td><?php if($row["di"] == 1) {?> <i ></i> <?php } else { ?> <i ></i> <?php } ?></td>
      <td><?php if($row["mi"] == 1) {?> <i ></i> <?php } else { ?> <i ></i> <?php } ?></td>
      <td><?php if($row["do"] == 1) {?> <i ></i> <?php } else { ?> <i ></i> <?php } ?></td>
      <td><?php if($row["fr"] == 1) {?> <i ></i> <?php } else { ?> <i ></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>' )
                } );
            } );
        }
    } );
} );

CodePudding user response：

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.

CodePudding user response：

I use‘d Unicode Symbols with php echo. This work for me!

Thank‘s for help.