Элементы поиска в столбце Datatables внутри td

Question

Я хочу найти метки внутри определенного столбца таблицы данных.

Мой HTML:

<td width="180">
  <label for="" class="hide">{{$bli->status->name}}</label>
  <form action="/items" method="POST">
    @method('PATCH')
    @csrf
    <select name="status_id" class="form-control status" id="sel1">
      @foreach($status as $stat)
      <option {{ $stat->id == $bli->status->id ? "selected" : "" }} value="{{ $stat->id }}">{{ $stat->name }}</option>
      @endforeach
    </select>
  </form>
</td>

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

var table=$('.dataTable').DataTable();
$(".dataTable tfoot th").each(function(i) {
  if($(this).hasClass('status')) {
    var isStatusColumn=(($(this).hasClass('status')) ? true : false);
    var column=table.column(i);

    var select=$('<select class="form-control"><option value=""></option></select>')
      .appendTo($(this).empty())
      .on('change', function() {
        var val=$(this).val();
        table.column(i)
          .search(val ? '^'+$(this).val()+'$' : val, true, false)
          .draw();
        console.log(table.column(i));
      });


    if(isStatusColumn) {
      var statusItems=[];

      table.column(i).nodes().to$().each(function(d, j) {

        var thisStatus=$(j).find("label").html();
        if($.inArray(thisStatus, statusItems)=== -1) statusItems.push(thisStatus);
      });

      statusItems.sort();

      $.each(statusItems, function(i, item) {
        select.append('<option value="'+item+'">'+item+'</option>');
      });
    }
    // All other non-Status columns (like the example)
    else {
      table.column(i).data().unique().sort().each(function(d, j) {
        select.append('<option value="'+d+'">'+d+'</option>');
      });
    }
  }
});

Кажется, он не может найти ярлыки, а вместо этого выдает мне сообщение, например:

Как мне указать table.column( i ).search для поиска меток внутри ТД?Я пытался просто использовать table.column( i ).search( val ), но это не сработало.

Answer 1

Я смог найти решение самостоятельно.

Для всех, кто заинтересовался:

$(".dataTable thead th").each( function ( i ) {
    if($(this).hasClass('status')){
        var column = table.column( i );

        $(this).find('input[type="checkbox"]').on( 'change', function () {

            var listOfVals = [];

            $("thead input[type='checkbox']").each(function(index, element){
                if($(this).is(':checked')){
                    var val = $(this).parent().find("label").html();
                    listOfVals.push(val);
                }
            })
            var vals = listOfVals.join('|');
            column
              .search(vals.length > 0 ? '^(' + vals + ')$' : '', true, false)
              .draw();
        } );
    }
} );

Вместо этого я заменил select на флажки (выберите combox флажка, если хотите) и жестко закодировалих вместо того, чтобы добавлять их в дом с JS.Сделал массив значений каждого выбранного флажка onChange и выдвинул массив к доступному для поиска значению поиска.Сейчас работает как надо.