Select column in jQuery data table

Question

In the Datatables API notes, you can toggle the visibility of the https://datatables.net/extensions/buttons/examples/column_visibility/columns.html column :

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'colvis',
                columns: ':not(:first-child)'
            }
        ]
    } );
} );

But is there a way to select a column with a mouse click, since you select a row - that is, let the user know that the column is selected by selecting the column - and accessing the data in this column from javascript (for example, add another column after the selected column or delete selected column and reload the table, calculate statistics from the data in the column, etc.?)

Answer 1

, .

HTML

<table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
        <tr>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
            <th><input type="checkbox"></th>
        </tr>
    </thead>

    <!-- skipped -->

</table>

JavaScript

var table = $('#example').DataTable({
   'orderCellsTop': true,
   'select': 'multi'
});

$('#example').on('change', 'thead input[type="checkbox"]', function(){
   var colIdx = $(this).closest('th').index();
   if(this.checked){
      table.column(colIdx).select();
   } else {
      table.column(colIdx).deselect();      
   }
});

.

. jQuery DataTables: .

Answer 2

index(). , , .

$("#t").dataTable();
$("th").on("click", function() {
  var index = $(this).index();
  if ($(this).hasClass("highlighted")) {
    $(this).removeClass("highlighted");
    $("tr").find("td.highlighted").each(function(k, v) {
      if ($(v).index() == index) {
        $(v).removeClass("highlighted");
        console.log("Removed highlight in table cell with value \"" + $(v).text() + "\"");
      }
    });
  } else {
    $(this).addClass("highlighted");
    $("tr").find("td").each(function(k, v) {
      if ($(v).index() == index) {
        $(v).addClass("highlighted");
        console.log("Added highlight in table cell with value \"" + $(v).text() + "\"");
      }
    });
  }
  console.log();
});

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
}

td, th {
    border: 1px solid #dddddd;
    text-align: left;
    padding: 8px;
}

tr:nth-child(even) {
    background-color: #dddddd;
}

.highlighted {
background:yellow;
}

<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table id="t">
  <thead>
    <tr>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alfreds Futterkiste</td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td>Centro comercial Moctezuma</td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td>Ernst Handel</td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td>Island Trading</td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td>Laughing Bacchus Winecellars</td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td>Magazzini Alimentari Riuniti</td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>

Hide result

Answer 3

( ) DataTables. , destroy() .