CODEWITHSUNDEEP
jquerydatatable
Bill Boher
Bill Boher

Reputation: 3

Datatable Colvis : enable individual column searches for columns which are initially hidden

I need to hide some columns at start and I'm doing so with the column.visible option.

The problem is that when the user uses the Colvis button to make the column reappear the column search doesn't work anymore. It seems that because the visibility extension remove the DOM element and with it the event ?

Is there a hack to make it work ?

$("#table_id").append(
   $('<tfoot/>').append($("#table_id thead tr").clone())
);
var x = new Boolean("true");
$(document).ready(function() {
   // Setup - add a text input to each footer cell
   $('#table_id tfoot th').each(function() {
	   var title = $('#table_id thead th').eq($(this).index()).text();
	   $(this).html('<input type="text" placeholder="Search ' + title + '" />');
   });
   if (x) {
	   var column = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44]
	   for (var i in column) {
		   table.column(column[i]).visible(false);
	   }

	   var column = [0, 1, 2, 3, 4, 5, 6, 7]
	   for (var i in column) {
		   table.column(column[i]).visible(true);
	   }
	   x = !x
   };

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


});


// DataTable
var table = $('#table_id').DataTable({
   colReorder: true,
   scrollX: false,

   "autoWidth": false,
   fixedHeader: true,
   "iDisplayLength": 50,
   "aLengthMenu": [
	   [25, 50, 100, 200, 500, -1],
	   [25, 50, 100, 200, 500, "All"]
   ],
   deferRender: false,
   'dom': 'ZBfrltip',
   buttons: ['copy', 'csv',
	   {
		   extend: 'colvis',
		   prefixButtons: ['colvisRestore']
	   }
   ],

   columnDefs: [{
	   targets: '_all',
	   visible: true
   }, {
	   width: 200,
	   targets: '_all'
   }],
});

Upvotes: 0

Views: 1490

Answers (1)

Bhumi Shah
Bhumi Shah

Reputation: 9476

Here is the solution and working demo: https://codepen.io/creativedev/pen/bjqxzL

Changed your code to:

$('body').on('keyup change', '#table_id tfoot input', function() {

Final code:

$("#table_id").append(
   $('<tfoot/>').append($("#table_id thead tr").clone())
);
var x = new Boolean("true");
$(document).ready(function() {
   // Setup - add a text input to each footer cell
   $('#table_id tfoot th').each(function() {
       var title = $('#table_id thead th').eq($(this).index()).text();
       $(this).html('<input type="text" placeholder="Search ' + title + '" />');
   });
   if (x) {
       var column = [0, 1, 2, 3, 4, 5]
       for (var i in column) {
           table.column(column[i]).visible(false);
       }

       var column = [0, 1, 2]
       for (var i in column) {
           table.column(column[i]).visible(true);
       }
       x = !x
   };

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


});


// DataTable
var table = $('#table_id').DataTable({
   colReorder: true,
   scrollX: false,

   "autoWidth": false,
   fixedHeader: true,
   "iDisplayLength": 50,
   "aLengthMenu": [
       [25, 50, 100, 200, 500, -1],
       [25, 50, 100, 200, 500, "All"]
   ],
   deferRender: false,
   'dom': 'ZBfrltip',
   buttons: ['copy', 'csv',
       {
           extend: 'colvis',
           prefixButtons: ['colvisRestore']
       }
   ],

   columnDefs: [{
       targets: '_all',
       visible: true
   }, {
       width: 200,
       targets: '_all'
   }],
});

Upvotes: 1

Related Questions