javascriptjquerydynatable

Hiding columns in Dynatable


I'm hoping to replace my tables with Dynatable, but I need to be able to hide and show certain groups of columns to do so. I do this in the existing, regular html table by giving a group to each , for example:

<td class = "group1">cell value</td>

Then I have some hide and show javascript functions:

function hideCol(columnClass){
      $('table .'+columnClass).each(function(index) {
        $(this).hide();
      });

      $('ul#hiddenCols').append('<li id="'+columnClass+'"><a href="javascript:;" onclick="showCol(\''+columnClass+'\');">Show '+columnClass+'</a></li>');
    }

function showCol(columnClass){
  $('table .'+columnClass).each(function(index) {
    $(this).show();
  });

  $('li#'+columnClass).remove();
    }

$(document).ready(function() {
    hideCol("Group2");
    hideCol("Group3");
    hideCol("Group4");

    $('#radio1').click(function() {
    /*$(this).parent().addClass("active").siblings().removeClass("active")*/
        showCol("Group1");        
        hideCol("Group2");
        hideCol("Group3");    
        hideCol("Group4");
    });

Is there a reasonably straight forward way I can adapt Dynatable to do something similar? Is there a way I can assign classes to each and in a Dynatable?

Thanks a lot, Alex


Solution

  • There is a setting that makes the data in each column inherit the class of the column's header. However, when doing this there appears to be a bug when sorting hidden columns, as I mention in this question.

    I couldn't make this work with Dynatable, so I switched to Datatables, where hiding/sorting columns seems to be much more stable.