Question

我需要在开始时隐藏一些列，而我使用column.visible选项来隐藏它们。

问题在于，当用户使用“ Colvis”按钮使列重新出现时，列搜索不再起作用。似乎是因为可见性扩展删除了DOM元素以及事件？

是否有可以使其正常工作的黑客工具？

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

Answer 1

以下是解决方案和工作示例：https://codepen.io/creativedev/pen/bjqxzL

将您的代码更改为：

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

最终代码：

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

Datatable Colvis：启用单个列搜索以查找最初隐藏的列

1 个答案: