如何使用DataTable jQuery显示和隐藏列

Question

我需要在进行JavaScript测试后显示和隐藏数据表的列，但它的效果不太好。

这是我的测试JavaScript代码:

if ( $('#commune_to_display').val()==""){
    $('#utable td:nth-child(2)').hide();
    $('#commune_to ').hide();
}

这个测试只适用于数据表的第一页，在分页后，该列仍然可见。

如何解决？感谢您的帮助。

- youssef hassoun

Answer 1

你可以像下面展示/隐藏列。只需用你实际的列索引替换3和4即可。

var table = $('#utable').DataTable();
table.column(3).visible(true);    // To show
table.column(4).visible(false);   // To hide

- jignesh patel

Answer 2

类似这样的JavaScript代码：

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "scrollY": "200px",
        "paging": false
    } );

    $('a.toggle-vis').on( 'click', function (e) {
        e.preventDefault();

        // Get the column API object
        var column = table.column( $(this).attr('data-column') );

        // Toggle the visibility
        column.visible( ! column.visible() );
    } );
} );

像这样的HTML代码：

<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
</tbody>
    </table>

您可以在这里查看和运行完整的示例：https://datatables.net/examples/api/show_hide.html。

- Feras Al Sous