Используйте кнопки экспорта в DataTable - PullRequest
Новая
       18

Используйте кнопки экспорта в DataTable

0 голосов
/ 24 июня 2019

У меня есть DataTable, который обрабатывает данные на стороне сервера с использованием Ajax.Я пытаюсь добавить в него кнопки экспорта, но мне это не удалось.Я расширяю представление Laravel, в котором уже есть все файлы, но мне не удается отобразить кнопки.

Мастер-страница с необходимыми файлами: 

    <!-- Datatable -->
    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"> </script>
    <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
    <script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"> </script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js" type="text/javascript"></script>
    <script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>

Страница с DataTable: 

    <script type="text/javascript">
        $(document).ready(function(){
                $('#payments-table').DataTable({
                  dom: 'Bfrtip',
                  buttons: [
                      'copy', 'csv', 'excel', 'pdf', 'print'
                ],
                processing: true,
                serverSide: true,
                ajax: '{{ route('get.payments') }}',
                order:[ [5,'desc'] ],
                columns: [

                    { data: 'id', name: 'id' },
                    { data: 'sub_id', name: 'sub_id' },
                    { data: 'company_name', name: 'company_name'},
                    { data: 'amount', name: 'amount'},
                    { data: 'status', name: 'status'},
                    { data: 'job_date', name: 'job_date'},
                    { data: 'amount_payed', name: 'amount_payed'},
                    { data: 'date_payed', name: 'date_payed'},
                    { data: 'trn_ss', name: 'trn_ss'},
                    { data: 'account_number', name: 'account_number'},
                    { data: 'bank_name', name: 'bank_name'},
                    { data: 'bank_branch', name: 'bank_branch'},
              ]
            });
  });

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

1 Ответ

0 голосов
/ 24 июня 2019

Вы пытались вручную вставить кнопки?

var table = $('#payments-table').DataTable({...

$('#div_to_place_buttons_in').html(table.buttons().container());

Из моего опыта работы с DataTables вам не понадобится dom: 'Bfrtip', если вы вручную переместите контейнер кнопок в другое место.

Для вашего комментария просто измените экземпляр DataTables, который будет храниться в переменной с именем table, и удалите часть dom, и тогда у вас будет доступ к экземпляру DataTables в табличной переменной.См. Ниже: 

var table = $('#payments-table').DataTable({
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            processing: true,
            serverSide: true,
            ajax: '{{ route('get.payments') }}',
            order:[ [5,'desc'] ],
            columns: [

                { data: 'id', name: 'id' },
                { data: 'sub_id', name: 'sub_id' },
                { data: 'company_name', name: 'company_name'},
                { data: 'amount', name: 'amount'},
                { data: 'status', name: 'status'},
                { data: 'job_date', name: 'job_date'},
                { data: 'amount_payed', name: 'amount_payed'},
                { data: 'date_payed', name: 'date_payed'},
                { data: 'trn_ss', name: 'trn_ss'},
                { data: 'account_number', name: 'account_number'},
                { data: 'bank_name', name: 'bank_name'},
                { data: 'bank_branch', name: 'bank_branch'},
          ]
        });
$('#div_to_place_buttons_in').html(table.buttons().container());

Я не уверен, как выглядит ваш HTML, но вам просто нужен контейнер div / аналогичный, чтобы разместить кнопки и ссылаться на него вместо div_to_place_buttons_in.

...