Кнопки экспорта Datatable

Мне нужно сгруппировать в одном раскрывающемся списке button, чтобы поместить кнопки экспорта, как в этом примере: введите описание ссылки здесь

Это в моем текущем Project:

var table = $('#listaDocumentos').DataTable({
    dom: 'Bfrtip',
    buttons: [
        'copy', 'csv', 'excel', 'pdf'
    ],
    language: {
        "decimal": "",
        "emptyTable": "No hay información",
        "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
        "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
        "infoFiltered": "(Filtrado de _MAX_ total entradas)",
        "infoPostFix": "",
        "thousands": ",",
        "lengthMenu": "Mostrar _MENU_ Documentos",
        "loadingRecords": "Cargando...",
        "processing": "Procesando...",
        "search": "Buscar:",
        "zeroRecords": "Sin resultados encontrados",
        "paginate": {
            "first": "Primero",
            "last": "Ultimo",
            "next": "Siguiente",
            "previous": "Anterior"
        }
    }
});

<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"> <script type = "text/javascript" language = "javascript" src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>

<table id = "listaDocumentos" class = "table table-striped table-bordered" style = "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>
    <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>
        <tr>
            <td>Donna Snider</td>
            <td>Customer Support</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$112,000</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

javascript asp.net-mvc datatable datatables

14.12.2018 23:56

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 483

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Чтобы поместить кнопки экспорта в раскрывающийся список, вы можете использовать следующий код. при инициализации таблицы данных вы можете использовать следующий код для отображения кнопки с набором кнопок.

buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                        'copy',
                        'excel',
                        'csv',
                        'pdf',
                        'print'
                    ]
                }
            ]

вы должны использовать скрипт в следующем порядке

<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css">
<script type = "text/javascript" language = "javascript" src = "https://code.jquery.com/jquery-3.3.1.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script type = "text/javascript" language = "javascript" src = " https://cdn.datatables.net/buttons/1.5.4/js/dataTables.buttons.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/1.5.4/js/buttons.html5.min.js"></script>
<script type = "text/javascript" language = "javascript" src = "https://cdn.datatables.net/buttons/1.5.4/js/buttons.print.min.js"></script>
<script type = "text/javascript">
    $(document).ready(function () {
        var table = $('#listaDocumentos').DataTable({
            dom: 'Bfrtip',
            buttons: [
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                        'copy',
                        'excel',
                        'csv',
                        'pdf',
                        'print'
                    ]
                }
            ],
            language: {
                "decimal": "",
                "emptyTable": "No hay información",
                "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
                "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
                "infoFiltered": "(Filtrado de _MAX_ total entradas)",
                "infoPostFix": "",
                "thousands": ",",
                "lengthMenu": "Mostrar _MENU_ Documentos",
                "loadingRecords": "Cargando...",
                "processing": "Procesando...",
                "search": "Buscar:",
                "zeroRecords": "Sin resultados encontrados",
                "paginate": {
                    "first": "Primero",
                    "last": "Ultimo",
                    "next": "Siguiente",
                    "previous": "Anterior"
                }
            }
        });
    });
</script>

Надеюсь, у вас это сработает.

вы можете провести демонстрацию, потому что правда не сработала

— 17.12.2018 15:59

Также вы можете попасть сюда drive.google.com/file/d/1cgrTzr2lzw2JyS2a9aKJb0u33IjCo23z/…

— 11.01.2019 13:54

15.12.2018 08:45