CODEWITHSUNDEEP
javascriptdatatables
JaymingJay
JaymingJay

Reputation: 11

DataTable column visibility

My DataTable at the moment

<table id='table' class="display hover row-border">
<thead>
    <tr>
      <th class="group1">Oranges</th>
      <th class="group1">Bananas</th>
      <th class="group1">Melons</th>
      <th class="group1">Tangerines</th>
      <th class="group1">Apple</th>
      <th class="group2">Cucumber</th>
      <th class="group2">Tomatoo</th>
      <th class="group2">Pepper</th>
    </tr>
</thead>

I have divided my columns into two categories and have placed them into the following divs.

<li>
<h5> Category 1</h5>
<div id="buttons-group1"></div>
</li>       

<li>
<h5> Category 2</h5>
<div id="buttons-group2"></div>
</li>

The issue I have is that I only seem to be able to control the default visibility of the columns in the category at the top, in this case category 1. Since I want only two out of five columns from category 1 to be shown when the page loads the second category seems to live a life on its own.

If I would move Category 2 above Category 1 I would be able to control category 2 but not 1 etc.

Any thoughts?

Assigns the toggle buttons to the group divs: 

$(document).ready(function (){
    var table = $('#test_table').DataTable();   

    var buttons1 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group1'
            }, 
        ]
    }).container().appendTo($('#buttons-group1'));

    var buttons2 = new $.fn.dataTable.Buttons(table, {
        buttons: [
            {
                extend: 'columnsToggle',
                columns: '.group2'
            }, 
        ]
    }).container().appendTo($('#buttons-group2'));
   });

My current JavaScript in order to toggle buttons looks like this

function DefaultButtons()
  {
    var table = document.querySelector('#table');
    var buttons = document.querySelector('.dt-buttons');
    var allButtons = buttons.getElementsByTagName("a");
    for (var i = 0; i < allButtons.length; i++) 
    { 
      var button = allButtons[i]; 
      var name = button.getElementsByTagName('span')[0].textContent; 
      if(name != 'Oranges' && name != 'Bananas')
      {
        console.log(name);
        button.click(); 
      }
    }
  }

**EDIT: ** Updated my code.

Upvotes: 1

Views: 326

Answers (1)

D. Braun
D. Braun

Reputation: 508

$('#table')

means you want to get the element with the id="table".

It looks like both Tables have the same id.

Upvotes: 0

Related Questions