隐藏/显示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 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标准

隐藏/显示Datatables插件的列？

相关推荐