Column filtering DataTable, remove specific column filter

Question

I'm using the Column filter from the DataTables library, it adds a filter for each column in my table, the problem and that I need to remove the filter from the first column because it is a checkbox. I have tried some things without success, I will leave the codes that I am using.

Link DataTables: https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

My Table:

<table id="table" class="table table-sm table-responsive display text-center" style="width:100%">
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll" /></th>
                    <th>Id</th>
                    <th>Filial</th>
                    <th>Serie</th>
                    <th>Documento</th>
                    <th>Nop</th>
                </tr>
            </thead>
           
        </table>

JS:

     $(document).ready(function () {
    $("#selectAll").click(function () {
        let select = $(this).is(":checked")
        $("[type=checkbox]").prop('checked', select)
    })
});

$(document).ready(function () {
    $('#table thead tr').clone(true).appendTo('#table thead');
    $('#table thead tr:eq(0) th').each(function (i) {
            $(this).html('<input type="text" />');

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

Answer 1

To avoid drawing the control in the first place, take a look at this line:

$('#table thead tr:eq(0) th').each( function (i) { 

Here, i represents a loop counter. When the counter is 0, you are building the input control for column index 0 (the first column). You can therefore use an if(i > 0) {... } statement inside that function to ignore the first iteration of the loop.

Because you are cloning a heading row which already contains a checkbox in the first column, you may also need to remove the "cloned" checkbox using $( this ).empty(); .

$('#table thead tr:eq(0) th').each(function(i) {

  if (i == 0) {
    $( this ).empty();
  } else {
    var title = $(this).text();

    $(this).html('<input type="text" />');

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

});