隱藏/顯示Datatables插件的列？

我有一個類似的表：隱藏/顯示Datatables插件的列？

<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插件工作，並在網站上，它有一個隱藏/顯示列的樣本，但與外部鏈接。我能夠添加一個鏈接來隱藏/顯示一列，但這裏是我的問題：

我不知道如何獲得被點擊的索引或列。我不知道如何使用jquery從div中刪除它。當我點擊顯示/隱藏時，它將它放入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>

我遺漏了一些表格數據。

來源

2013-05-02 Xaisoft

你試過了......什麼？ – 2013-05-02 23:20:00

@ Ek0nomik - 已更新 – Xaisoft 2013-05-02 23:23:30

如果您發佈了您嘗試過的代碼，這將是有益的。調試起來更容易。 – 2013-05-02 23:24:55

我已膨脹的數據表摺疊的行，以及如何我處理知道哪一行被點擊是

1）分配一個元素ID到每個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 ID

$('#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); 
    } ... });

*請注意，如果它的數字你可能想要追加一些文本之前，數字只有元素ID的可以創建JavaScript/jQuery的問題，我認爲不符合HTML標準

來源

2013-05-03 14:44:24

隱藏/顯示Datatables插件的列？

回答

相關問題