Answers

• dtimperman Posts: 6Questions: 2Answers: 1

  June 2014 edited June 2014 Answer ✓

  I use the following to hide and show columns on span click:
  (example for second column)
  <span class="toggle-vis" data-column="1">column x</span>

       $('.toggle-vis').each(function(i, obj) {
          //get column API object(attribute 'data-column' contains index of column)
          var column = oTable.column($(this).attr('data-column'));
          if (column.visible()) {
              $(this).removeClass('hidden');
          } else {
              $(this).addClass('hidden');
          }
      });
  
      //on click of 'toggle-vis' classes handle column visibility
      $('.toggle-vis').on('click', function(e) {
          //get column API object(attribute 'data-column' contains index of column)
          var column = oTable.column($(this).attr('data-column'));
          if (column.visible()) {
              column.visible(false);
              $(this).addClass('hidden');
          } else {
              column.visible(true);
              $(this).removeClass('hidden');
          }
      });
  
• jorge1687 Posts: 2Questions: 1Answers: 0

  June 2014

  Thanks for your code and your time.

  I implemented the next solution. I add the next code

  $('#mytable').dataTable({
  "createdRow": function ( row, data, index ) {
                          $('td', row).eq(4).addClass("hidetd");
                          $('td', row).eq(5).addClass("hidetd");
                      },
  "ajax": {
               url: "myurl"
       }
  });
  

  when it create the column, I add the css class 'hidetd' that hidden the colums i want, later I can obtain the value for these columns
• allan Posts: 63,368Questions: 1Answers: 10,449 Site admin

  June 2014

  I'd suggest against using display:none on table elements as it can do odd things in older browsers. Use columns.visible or the API as @dtimperman suggests.

  Allan