JSFiddle - React, Tailwind, and code Playground

by crazzzy

HTML

<script src="//code.jquery.com/jquery-1.12.3.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables-colvis/1.1.2/js/dataTables.colVis.min.js"></script>
<link rel="stylesheet" href="https://www.datatables.net/release-datatables/extensions/ColVis/css/dataTables.colVis.css">
<table id="dt1">
   <thead>
      <tr>
         <td>ID</td>
         <td>Product</td>
         <td>Price</td>
         <td>Manufacturer</td>
         <td>Quatity</td>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>1</td>
         <td>Pineapple</td>
         <td>17</td>
         <td>Man1</td>
         <td>8</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Banana</td>
         <td>15</td>
         <td>Man2</td>
         <td>2</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Apple</td>
         <td>12</td>
         <td>Man2</td>
         <td>7</td>
      </tr>
      <tr>
         <td>4</td>
         <td>Pear</td>
         <td>11</td>
         <td>Man1</td>
         <td>15</td>
      </tr>
   </tbody>
</table>

<br/>
<br />
<button id="button">Show visible columns names</button>

JavaScript

var table;

$(document).ready(function() {
   table = $('#dt1').DataTable({
      "dom": 'C<"clear">rt',
      columns: [{
         name: 'id'
      }, {
         name: 'product'
      }, {
         name: 'price'
      }, {
         name: 'manufacturer'
      }, {
         name: 'quantity'
      }]
   });

   $('#button').click(get_visible_columns);
});


function get_visible_columns() {
	//console.log(table);
   var all_columns = table.settings().init().columns;
	console.log('all_columns', all_columns);
	var visible_columns = [];
	for (var i in all_columns) {
		if (table.column(all_columns[i].name + ':name').visible()) {
			visible_columns.push(all_columns[i].name);
		}
	}
	
	alert(visible_columns.join(', '));
}