Есть ли способ добавить кнопку, чтобы скрыть все столбцы в DataTables? - PullRequest
Новая
       18

Есть ли способ добавить кнопку, чтобы скрыть все столбцы в DataTables?

0 голосов
/ 03 мая 2019

У меня нормально работает функция видимости столбца, когда пользователь нажимает на определенный столбец, он исчезает. Однако я хочу добавить кнопку, которая скрывает все столбцы. Таким образом, он выберет все заголовки в столбце видимости, и пользователь отменит выбор тех, которые они хотят видеть. Я не думаю, что это доступно в 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]

1 Ответ

0 голосов
/ 03 мая 2019

Это должно работать: 

<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. Спасибо

...