DATATABLE INDIVIDUAL FILTER SELECT

An error on select filter when I get the current value of a cell and concat with html codes. Therefore select got an error.

by Carl Angelo Nievarez

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.15/css/dataTables.bootstrap.min.css">
<!--This is fine DataTable With individual filter. Thanks to H77 answering my https://stackoverflow.com/questions/45275598/error-datatable-individual-select-when-using-innerhtml-->

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
  <thead>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Position</th>
      <th>Office</th>
      <th>Start date</th>
      <th>Salary</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Tiger Nixon</td>
      <td>System Architect</td>
      <td>Edinburgh</td>
      <td>2011/04/25</td>
      <td>$320,800</td>
    </tr>
    <tr>
      <td>Garrett Winters</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>2011/07/25</td>
      <td>$170,750</td>
    </tr>
    <tr>
      <td>Ashton Cox</td>
      <td>Junior Technical Author</td>
      <td>San Francisco</td>
      <td>2009/01/12</td>
      <td>$86,000</td>
    </tr>
    <tr>
      <td>Cedric Kelly</td>
      <td>Senior Javascript Developer</td>
      <td>Edinburgh</td>
      <td>2012/03/29</td>
      <td>$433,060</td>
    </tr>
    <tr>
      <td>Airi Satou</td>
      <td>Accountant</td>
      <td>Tokyo</td>
      <td>2008/11/28</td>
      <td>$162,700</td>
    </tr>
    <tr>
      <td>Brielle Williamson</td>
      <td>Integration Specialist</td>
      <td>New York</td>
      <td>2012/12/02</td>
      <td>$372,000</td>
    </tr>
    <tr>
      <td>Herrod...

CSS

/* DataTable Tfoot*/

tfoot input {
  width: 100%;
}

tfoot {
  display: table-header-group;
}

JavaScript

const tablexxx = document.getElementById('example');
const rows = tablexxx.querySelectorAll('tbody tr');

rows.forEach((row) => {
  const cells = row.getElementsByTagName('td');
  const office = cells[2].innerText;

  var inspectedtext = '<br><span class="label label-success"><span class="fa fa-info-circle"></span> INSPECTED</span>';


  if (office === "Tokyo") {
    cells[2].innerHTML = office.concat(inspectedtext);
  } else {
    cells[2].innerHTML = office;
  }
});

$('#example tfoot th').each(function() {
  var title = $(this).text();
  $(this).html('<input class="form-control" type="text" placeholder="Search ' + title + '" style="width:100%" />');
});

// DataTable
var table = $('#example').DataTable();

// Apply the search
table.columns().every(function() {
  var that = this;

  $('input', this.footer()).on('keyup change', function() {
    if (that.search() !== this.value) {
      that
        .search(this.value)
        .draw();
    }
  });
});

table.column(2).every(function() {

  var column = this;
  var select = $('<select class="form-control" style="width:100%"><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) {
    var $div = $("<div/>").html(d);
    var val = $div.text();
    var txt = $div[0].childNodes[0].nodeValue;
    select.append('<option value="' + val + '">' + txt + '</option>')
});ct.append('<option value="' + d + '">' + d + '</option>')

});