Question

当用户单击某个列时，该列可见性的功能可以正常工作。但是，我想添加一个“全部隐藏”列的按钮。因此它将选择列可见性中的所有标题，而用户将取消选择他们想要查看的标题。我认为它在dataTables中不可用，所以请帮助谢谢。这是我的代码：

   $(document).ready(function () {
        $('#scrape').dataTable(
            {
                "pageLength": 100,
                fixedHeader: {
                    header: true,
                    footer: true,
                    headerOffset: 50
                },
                "dom": '<"dt-buttons"Bfli>rtp<"initial"i> ',

                "autoWidth": true,
                "buttons": [
                    'colvis',//this let user hide columns 
//individually,i want to add a button to hide all, or highlights all the //titles in colvis.  
                    'copyHtml5',
                    'csvHtml5',
                    'excelHtml5',
                    'pdfHtml5',
                    'print'
                ]
            });

        $('body').delegate('#scrape tbody tr', "click", function () {
            if ($(this).hasClass('selected')) $(this).removeClass('selected');
            else {
                $(this).siblings('.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });


    });[![enter image description here][1]][1]

Answer 1

这应该有效：

<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.2.2/css/buttons.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css" />
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />

</head>
@section scripts
{
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/vfs_fonts.js"></script>
    <script src="https://cdn.rawgit.com/bpampuch/pdfmake/0.1.18/build/pdfmake.min.js"></script>
    <script src="https://cdn.datatables.net/fixedheader/3.1.2/js/dataTables.fixedHeader.min.js"></script>

    <script>

        $(document).ready(function () {
            $('#scrape').dataTable(
                {
                    "pageLength": 100,
                    fixedHeader: {
                        header: true,
                        footer: true,
                        headerOffset: 50
                    },
                    "dom": '<"dt-buttons"Bfli>rtp<"initial"i> ',

                    "autoWidth": true,
                    "buttons": [
                        'colvis',
                        'copyHtml5',
                        'csvHtml5',
                        'excelHtml5',
                        'pdfHtml5',
                        'print',
                        {
                            extend: 'colvisGroup',
                            text: 'Hide all',

                            hide: ':visible'
                        },
                        {
                            extend: 'colvisGroup',
                            text: 'Show all',
                            show: ':hidden'
                        }
                    ]
                });
            $('body').delegate('#scrape tbody tr', "click", function () {
                if ($(this).hasClass('selected')) $(this).removeClass('selected');
                else {
                    $(this).siblings('.selected').removeClass('selected');
                    $(this).addClass('selected');
                }
            });
            $('.myBtn').hideme('#scrape tbody tr', "click", function () {

                $('.hideMe.').hide();
            });

        });

    </script>
}

这是所有代码，以防将来有人遇到相同的问题，在这种情况下，我在dataTables中具有“ show All”和“ Hide All”功能。谢谢

有没有一种方法可以添加按钮以隐藏DataTables中的所有列？

1 个答案: