Remove column filter from datatables using multicolumn filtering and childrows

Question

I am using datatables utilizing the multicolumn filtering option and child rows.

The first column is reserved for the control image for the child rows. I need to remove the search input from the first column since it has no data.

I cannot figure out how to remove the first column search. I need help with this please!

JS info

/* Formatting function for row details - modify as you need */
function format ( d ) {
// `d` is the original data object for the row
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;padding-right:50px;">'+
    '<tr>'+
        '<td>Category:</td>'+
        '<td>'+d.LongDesc+'</td>'+
        '<td rowspan="3"><img src="' + d.Thumb + '"/></td>'+
    '</tr>'+
    '<tr>'+
        '<td>Location:</td>'+
        '<td>'+d.Location+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Notes:</td>'+
        '<td>'+d.Notes+'</td>'+
    '</tr>'+
'</table>';
}

$(document).ready(function() {
 // Setup - add a text input to each footer cell
  $('#example thead th').each( function () {
    var title = $('#example thead th').eq( $(this).index() ).text();
    $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
  } );

  var table = $('#example').DataTable( {
    "ajax": "../data/cat-data.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "Year" },
        { "data": "Make" },
        { "data": "Model" },
        { "data": "Engine" },
        { "data": "PartNumber" }
    ],
    "order": [[1,'asc'], [2,'asc'], [3,'asc'], [4,'asc'], [5,'asc']],
    "bSort": false,
    "bPaginate": true,
    "bLengthChange": true,
    "bInfo": false,
    "bAutoWidth": true,
    "iCookieDuration": 60*60*24, // 1 day 
  } );

  // Add event listener for opening and closing details
  $('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).parents('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
  } );

   // Apply the filter
  $("#example thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
   } );


} );

Answer 1

Try below code

var table = $('#example').DataTable( {
    "ajax": "../data/cat-data.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": '',
            "searchable": false 
            ^------------------^ // added this to disable search on first column
        },
        { "data": "Year" },
        { "data": "Make" },
        { "data": "Model" },
        { "data": "Engine" },
        { "data": "PartNumber" }
    ],
    "order": [[1,'asc'], [2,'asc'], [3,'asc'], [4,'asc'], [5,'asc']],
    "bSort": false,
    "bPaginate": true,
    "bLengthChange": true,
    "bInfo": false,
    "bAutoWidth": true,
    "iCookieDuration": 60*60*24, // 1 day 
  } );

Please refer to this link for more details.

If you are not able to remove search then modify your code like below

$('#example thead th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        if($(this).index() !=0) // check if this is not first column header
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );