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来搜索td内部的标签？我试图只使用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();
        } );
    }
} );

我将选择替换为复选框（如果愿意，请选择复选框组合），并对其进行了硬编码，而不是使用JS将其附加到dom。 对每个选中的复选框onChange的值进行数组，然后将其推入数据表搜索值。 现在可以正常工作了。