DataTables: Is it possible to dynamically change the columns of a Datatable to view, based on the selections in the dropdown?

Question

I have a DataTable, where in I want to have a dropdown which has a list of the columns names of the DataTable with checkboxes. Based on the selections in the checkbox, the DataTable should be updated with only those columns. Here is my JsFiddle tryin to achieve the same.

HTML:

<div class="button-group">
         <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Modify Columns</button>
         <ul class="dropdown-menu" id="checkboxlist"></ul>
</div>
<table id="example" class="display" cellspacing="0" width="100%"></table>

JavaScript:

AList = ["A", "B"];
    var selected = [];
    var sortlist = [];
    for (var i = 0; i < header.length; i++) {
        AList.push(header[i]);
    }
    $('#example').append("<thead style='background-color: rgb(159, 191, 223); !important'><tr></tr></thead>");
    for (var i = 0; i < AList.length; i++) {
        $('#example thead tr').append("<th style='background-color: rgb(159, 191, 223); !important'>" + AList[i] + "</th>");
$('#checkboxlist').append(' <li><a href="#" class="small" data-value="'+AList[i]+'" tabindex="-1"><input type="checkbox" />' +AList[i] + '</a></li>')

    }
    $('#example').append("<tbody></tbody>");
    $('#checkboxlist').append('<li><button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Update</button></li>');

Any suggestions on how to go about this?

score 0 · Accepted Answer · edited May 23 '17 at 11:51

Edit: References include: http://www.w3schools.com/html/html_tables.asp , Check if checkbox is checked with jQuery , http://api.jquery.com/hide/ , http://api.jquery.com/show/

You can add classes to the columns that corresponds to the letters (A, B, c, d, e) and show() and hide() to control the view.

Code: https://jsfiddle.net/eakwswfe/5/

Not sure how long the jsfiddle is going to stay up so as a backup, here is another simple implementation using show() and hide() and classes:

$( "#update" ).click(function() {
if($("#A:checkbox:checked").length == 0){
  $(".A").hide();
};
if($("#B:checkbox:checked").length == 0){
  $(".B").hide();
 }
if($("#c:checkbox:checked").length == 0){
  $(".c").hide();
 }
 if($("#d:checkbox:checked").length == 0){
  $(".d").hide();
 }
 if($("#e:checkbox:checked").length == 0){
    $(".e").hide();
 }
 
 if($("#A:checkbox:checked").length > 0){
  $(".A").show();
};
if($("#B:checkbox:checked").length > 0){
  $(".B").show();
 }
if($("#c:checkbox:checked").length > 0){
  $(".c").show();
 }
 if($("#d:checkbox:checked").length > 0){
  $(".d").show();
 }
 if($("#e:checkbox:checked").length > 0){
    $(".e").show();
 }
 
 
});

td.red{
  background-color: red;
}

td.blue{
  background-color: blue;
}

td.green{
    background-color: green;
}

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

</head>
<body>
<div class="button-group">
<button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-cog"></span> Modify Columns</button>
<ul class="dropdown-menu" id="checkboxlist">
 <li><a href="#" class="small" data-value="A" tabindex="-1"><input id="A" type="checkbox">A</a></li> <li><a href="#" class="small" data-value="B" tabindex="-1"><input id="B" type="checkbox">B</a></li> <li><a href="#" class="small" data-value="c" tabindex="-1"><input id="c" type="checkbox">c</a></li> <li><a href="#" class="small" data-value="d" tabindex="-1"><input id="d" type="checkbox">d</a></li> <li><a href="#" class="small" data-value="e" tabindex="-1"><input id="e" type="checkbox">e</a></li><li class="open"><button aria-expanded="true" id="update" type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"> Update</button></li>
  
  
  
  
</ul></div>
<table id="example" class="display" cellspacing="0" width="100%">
    <tr>
    <th class='A'>A</th>
    <th class='B'>B</th> 
    <th class='c'>c</th>
    <th class='d'>d</th> 
    <th class='e'>e</th>
  </tr>
    <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
      <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
      <tr>
    <td class='A'><a href="url">green</a></td>
    <td class='blue B'>blue</td> 
    <td class='red c'>red</td>
    <td class='blue d'>blue</td> 
    <td class='green e'>green</td>
  </tr>
</table>



</body>

Your solutions does work! But,This can be done only when you know that there are exactly "a,b,c,d,e" or exact number of columns in the table. Although in my scenario the number of columns in the DataTable is known only at runtime.But I think I can modify this, Thank you :) — Apeksha, Aug 10 '16 at 17:29

DataTables: Is it possible to dynamically change the columns of a Datatable to view, based on the selections in the dropdown?

1 Answers1