Question

<script type="text/javascript">
        $(document).ready(function() {
            $('#datatable-responsive').DataTable( {
                columnDefs: [{
                    targets: 'no-sort', orderable: false
                }]
            } );
        } );
    </script>

    <table id="datatable-responsive" class="table dt-responsive nowrap table-hover" cellspacing="0" width="100%">
        <thead>
            <th>Name</th>
            <th class="no-sort">Country</th>
            <th>Age</th>
            <th>Email</th>
        </thead>
        <tbody>
            <tr>
                <td>Matt</td>
                <td>Australia</td>
                <td>22</td>
                <td>matt@gmail.com</td>
            </tr>
            <tr>
                <td>Nadine</td>
                <td>Indonesia</td>
                <td>34</td>
                <td>nadine@outlook.com</td>
            </tr>
        </tbody>
    </table>

如何将列时代和电子邮件合并到国家/地区？单击国家/地区的标题时，tbody将显示相应的列。

Answer 1

您可以参考我的解决方案。希望能帮忙，我的朋友：

<table id="datatable-responsive" class="table dt-responsive nowrap table-hover" style="table-layout: fixed;">
    <thead>
    <tr>
        <th>Name</th>
        <th class="no-sort showHide">Country</th>
        <th class="showHide" >Age</th>
        <th class="showHide" >Email</th>
    </tr>
    </thead>
    <tbody>
        <tr>
            <td>Matt</td>
            <td>Australia</td>
            <td>22</td>
            <td>matt@gmail.com</td>
        </tr>
        <tr>
            <td>Nadine</td>
            <td>Indonesia</td>
            <td>34</td>
            <td>nadine@outlook.com</td>
        </tr>
    </tbody>
</table>

$(document).ready(function () {

        var columnShow = 3;

        //the first, hide Age and Email column
        $('#datatable-responsive td:nth-child(3),th:nth-child(3)').hide();
        $('#datatable-responsive td:nth-child(4),th:nth-child(4)').hide();

        $('.showHide').on('click', function () {

            //the first click show Age and hide Country column
            if (columnShow === 3) {
                $('#datatable-responsive td:nth-child(3),th:nth-child(3)').show(); 
                $('#datatable-responsive td:nth-child(2),th:nth-child(2)').hide();
                columnShow = 4;
                return;
            }

            //the second click show Email and hide Age column
            if (columnShow === 4) {
                $('#datatable-responsive td:nth-child(4),th:nth-child(4)').show();
                $('#datatable-responsive td:nth-child(3),th:nth-child(3)').hide();
                columnShow = 2;
                return;
            }

            //the next click show Country and hide Email column
            if (columnShow === 2) {
                $('#datatable-responsive td:nth-child(2),th:nth-child(2)').show();
                $('#datatable-responsive td:nth-child(4),th:nth-child(4)').hide();
                columnShow = 3;
                return;
            }
        });
    });

DataTables自定义标题单击事件

1 个答案: