Нужна помощь с плагином Datatable (Jquery)

210

19 апреля 2022, 20:00

Есть стандартная Bootstrap таблица

<table class="table table-bordered table-striped table-hover dataTable js-exportable">
                  <thead>
                    <tr>
                      <th>Email</th>
                      <th>Имя</th>
                      <th>Фамилия</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>Email</th>
                      <th>Имя</th>
                      <th>Фамилия</th>
                    </tr>
                  </tfoot>
                  <tbody>
                    <tr>
                      <td>email.ru</td>
                      <td>Роман</td>
                      <td>Королев</td>
                    </tr>
                  </tbody>
                </table>

$('.js-exportable').DataTable({
        dom: 'Bfrtip',
        responsive: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ]
    });

По умолчанию в таблице присутствует выпадающий список с выбором видимости строк, но при добавлении кнопок экспорта, то выпадающий список пропадает. Мне нужно его сохранить.

Answer 1

Можете продолжить экспериментировать глядя сюда. Думаю так для начала норм.

let table = $('.js-exportable').DataTable({
        lengthMenu: [[1, 2, 5, -1], [1, 2, 5, "All"]],
        dom: 'B<"wrapper"flipt>',
        responsive: true,        
        buttons: [
            {
                text: 'copy',
                action: function ( e, dt, node, conf ) {
                    alert( 'copy clicked on' );
                }
            },
            {
                text: 'csv',
                action: function ( e, dt, node, conf ) {
                    alert( 'csv clicked on' );
                }
            },
            {
                text: 'excel',
                action: function ( e, dt, node, conf ) {
                    alert( 'excel clicked on' );
                }
            },
            {
                text: 'pdf',
                action: function ( e, dt, node, conf ) {
                    alert( 'pdf clicked on' );
                }
            },
            {
                text: 'print',
                action: function ( e, dt, node, conf ) {
                    alert( 'print clicked on' );
                }
            }
        ]
    });

<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">  

<table class="js-exportable">
                  <thead>
                    <tr>
                      <th>Email</th>
                      <th>Имя</th>
                      <th>Фамилия</th>
                    </tr>
                  </thead>
                  <tfoot>
                    <tr>
                      <th>Email</th>
                      <th>Имя</th>
                      <th>Фамилия</th>
                    </tr>
                  </tfoot>
                  <tbody>
                    <tr>
                      <td>email.ru</td>
                      <td>Роман</td>
                      <td>Королев</td>
                    </tr>
                    <tr>
                      <td>email.ru2</td>
                      <td>Роман2</td>
                      <td>Королев2</td>
                    </tr>
                    <tr>
                      <td>email.ru3</td>
                      <td>Роман3</td>
                      <td>Королев3</td>
                    </tr>
                    <tr>
                      <td>email.ru4</td>
                      <td>Роман4</td>
                      <td>Королев4</td>
                    </tr>
                  </tbody>
                </table>