Скрытие/отображение столбцов из плагина Datatables th?

Question

У меня есть таблица вроде этого:

<table id="table_id"> 
    <thead> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>etc</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>Row 1 Data 1</td> 
      <td>Row 1 Data 2</td> 
      <td>etc</td> 
     </tr> 
     <tr> 
      <td>Row 2 Data 1</td> 
      <td>Row 2 Data 2</td> 
      <td>etc</td> 
     </tr> 
    </tbody> 
</table> 

То, что я хочу быть в состоянии сделать, это поставить какой-то изображение или ссылку, чтобы скрывать и показывать столбцы в <th>. Когда пользователь нажимает, чтобы скрыть столбец, я хочу поместить внутренний текст <th> в div и когда нажимают на div, я хочу, чтобы пользователь мог щелкнуть по столбцу по своему выбору и вернуть его обратно таблицу и удалить ее из div.

Я получил плагин datatables для работы и на веб-сайте, у него есть образец скрытия/отображения столбцов, но с внешними ссылками. Я смог добавить ссылку, чтобы скрыть/показать столбец, но вот мои проблемы:

Я не знаю, как получить индекс или столбец, который был нажат. Я не знаю, как удалить его из div с помощью jquery. Когда я нажимаю show/hide, он помещает его в div, но затем он повторяется для каждого щелчка, и я также могу щелкнуть его в div, и он отображает/скрывается в таблице в зависимости от текущего состояния.

<script type="text/javascript"> 

     $(document).ready(function() { 
      $('#datatable').dataTable(); 

      $('.showhide').live('click', function() { 

       var index = $('#datatable th').index(); 

       fnShowHide(index); 
      }); 
     }); 

     function fnShowHide(iCol) { 
      var oTable = $('#datatable').dataTable(); 

      var bVis = oTable.fnSettings().aoColumns[iCol].bVisible; 

      oTable.fnSetColumnVis(iCol, bVis ? false : true); 

      var index = $('#datatable td').index(); 
      console.log(index); 

      $('#columns').append('<a href="#">' + oTable.fnSettings().aoColumns[index].sTitle + '<a/>'); 

     } 
    </script> 

<div id="columns"><h4>Columns</h4></div> 
    <table id="datatable" class="display"> 
    <thead> 
    <tr> 
    <th></th> 
    <th></th> 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </table> 

Я не использовал некоторые данные таблицы.

Answer 1

У меня есть DataTable, который расширяет коллапсирует строки, и как я обращался зная, какая строка была нажата была

1) Назначить идентификатор элемента для каждого TR строки, aaData содержит мои данные, узел на номер один положение aaData мой уникальный идентификатор (если его первым узлом было бы aaData [0])

$('#records').dataTable({ 
       "bJQueryUI": true, 
       "fnRowCallback": function(nRow, aaData, iDisplayIndex, iDisplayIndexFull) { 
               $(nRow).attr('id', aaData[1]); 
               return nRow; 
                  } , 
       "aoColumnDefs": [{ "bSortable": false, "aTargets": [ 0 ] }], 
       "aaSorting": [[ 1, "asc" ]] 
}); 

теперь ваши последующие события могут ссылаться на TR идентификатор

$('#records tbody td img').on('click', function() { 
    var nTr = this.parentNode.parentNode; 
    if (this.src.match('details_close')) 
    { 
     /* This row is already open - close it */ 
     this.src = "../ci/images/details_open.png"; 
     dataTable.fnClose(nTr); 
    } ... }); 

* обратите внимание, что если его числовое значение может быть добавлено ранее, числовые идентификаторы элемента могут создавать javascript/jquery проблемы, и я думаю, что не соответствует html