使用多列过滤和子行从数据表中删除列过滤器

Question

我正在使用利用多列过滤选项和子行的数据表。

第一列是为子行的控制图像保留的。我需要从第一列中删除搜索输入，因为它没有数据。

我不知道如何删除第一列搜索。我需要这方面的帮助！

JS信息

/* 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

试试下面的代码

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 
  } );

更多详情请参考this链接。

如果您无法删除搜索，请修改您的代码，如下所示

$('#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+'" />' );
    } );