Jquery 从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>

我希望能够做的是在页面中放置某种类型的图像或链接来隐藏和显示列。当用户单击隐藏列时，我希望将的内部文本放在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>

---

我漏掉了一些表数据。

我有一个数据表，它可以展开和折叠行，以及我如何处理知道单击了哪一行

1为每个TR行分配一个元素id，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的

您是否尝试过。。。有什么事吗？如果你把你试过的东西的代码贴出来会很有帮助。调试起来更容易。@Ek0nomik-发布了一些代码，但无法正常工作。