CODEWITHSUNDEEP
jquerydatatables
Don Smythe
Don Smythe

Reputation: 9814

Select column in jQuery DataTables

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

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

But is there a way to select a column vie mouse click as you would select a row - ie let the user know the column is selected by highlighting the column - and access the data in that column from javascript (for example add another column after the selected column or delete the selected column and re-load table, calculate stats on data in the column etc..?)

Upvotes: 6

Views: 8442

Answers (3)

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use Select extension which has the ability to select columns.

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();      
   }
});

See this example for code and demonstration.

See jQuery DataTables: How to select columns for more information and examples.

Upvotes: 2

user2560539
user2560539

Reputation:

This can be done with the usage of index(). Check the below snippet in action to highlight any column you want.

$("#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>

Upvotes: 1

ax.
ax.

Reputation: 59927

Adding or removing columns dynamically (vs. changing visibility) is not supported by DataTables. As mentioned there, you might try to destroy() the old and create and initialize a new table.

Upvotes: 0

Related Questions