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插件，在网站上，它有一个隐藏/显示列的示例，但有外部链接。我能够添加隐藏/显示列的链接，但这是我的问题：

我不知道如何获取被点击的索引或列。我不知道如何使用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>

我遗漏了一些表数据。

Answer 1

我有一个扩展折叠行的数据表，以及我如何知道单击哪一行是

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

隐藏/显示Datatables插件中的列？

1 个答案: