How to disable a search/filter on a specific column on a datatable?
12,324
Solution 1
You can use .not
to exclude the columns you want to add input text too. Furthermore, you can also add code to avoid adding event handlers to any input boxes in the excluded columns (although if no input boxes exist in those cells it doesn't matter):
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#example tfoot th').not(":eq(2),:eq(3),:eq(4)") //Exclude columns 3, 4, and 5
.each( function () {
var title = $('#example thead th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#example').DataTable();
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
if (colIdx == 2 || colIdx == 3 || colIdx == 4) return; //Do not add event handlers for these columns
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
See Fiddle: http://jsfiddle.net/30phqqqg/1/
Solution 2
The same story for columns with filtering. 2nd column filtering disable:
$(document).ready(function() {
$('#example').DataTable( {
initComplete: function () {
this.api().columns().every( function () {
var column = this;
var some = column.index();
if (column.index() == 1) return;
var select = $('<select><option value=""></option></select>')
.appendTo( $(column.footer()).empty() )
.on( 'change', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? '^'+val+'$' : '', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( '<option value="'+d+'">'+d+'</option>' )
} );
} );
}})
};
Author by
user3818592
Updated on June 08, 2022Comments
-
user3818592 almost 2 years
My datatable has 5 columns and I need to disable filtering for the 3rd, 4th and last column.
please help!!!
this is the javascript:
<script type="text/javascript" language="javascript" class="init"> $(document).ready(function() { // Setup - add a text input to each footer cell $('#example tfoot th').each( function () { var title = $('#example thead th').eq( $(this).index() ).text(); $(this).html( '<input type="text" placeholder="Search '+title+'" />' ); } ); // DataTable var table = $('#example').DataTable(); // Apply the search table.columns().eq( 0 ).each( function ( colIdx ) { $( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () { table .column( colIdx ) .search( this.value ) .draw(); } ); } ); } ); </script>