Как скрыть кнопку экспорта DataTables, если нет данных?

Question

Я делаю проект в Laravel. Я реализовал DataTables как,

blade.php

<table id="userprofaneword-table" class="table table-condensed table-hover">
     <thead>
        <tr>
            <th>{{ trans('labels.backend.report.profaneword.table.id') }}</th>
            <th>{{ trans('labels.backend.report.profaneword.table.user') }}</th>
        </tr>
     </thead>
     <tbody>
          @foreach($profaneData as $profaneUser)
               <tr>
                   <td>{{$profaneUser->user->id ?? '---'}}</td>
                   <td>{{$profaneUser->user->first_name ?? '---'}}
                   </td>
               </tr>
          @endforeach
     </tbody>
</table>

Сценарии

{{ Html::script("https://cdn.datatables.net/v/bs/dt-1.10.15/datatables.min.js") }}
{{ Html::script("js/backend/plugin/datatables/dataTables-extend.js") }}

{{ Html::script("https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js") }}
{{ Html::script("https://cdn.datatables.net/buttons/1.5.1/js/dataTables.buttons.min.js") }}
{{ Html::script("https://cdn.datatables.net/buttons/1.5.1/js/buttons.html5.min.js") }}

<script>
    $(function () {
        $('#userprofaneword-table').DataTable({
            "dom": "Bfrtip",
            "lengthChange": true,
            "autoWidth": true,
            "searching": true,
            "order": [[ 0, "desc" ]],
            "language": {
                "searchPlaceholder": "Search",
            },
            "buttons": [
                {
                    "extend": 'excelHtml5',
                    "text": 'Export User Profanity Report',
                    "className":"btn btn-sm btn-primary pull-right",
                    "exportOptions": {
                     "columns": ":not(:last-child)",
                    }
                }
            ],
            "select": true,
            "searchDelay": 500
        });
    });
</script>

Все работает нормально. Я могу экспортировать данные из таблицы, я просто хочу скрыть кнопку экспорта, если нет данных , поступающих с контроллера.

Answer 1

Полагаю, вы хотите отреагировать на фильтрацию и так далее. И вы просто хотите сделать кнопку невидимой, а не нарушать макет DOM. Вы можете использовать drawCallback и установить visibility в соответствии с наличием строк:

drawCallback: function() {
  var hasRows = this.api().rows({ filter: 'applied' }).data().length > 0;
  $('.buttons-excel')[0].style.visibility = hasRows ? 'visible' : 'hidden'
}

Вот демоверсия -> https://jsfiddle.net/okednaqg/

Answer 2

Вы можете использовать JQuery, чтобы отключить / включить кнопку на основе количества строк. Вот пример, где экспорт CSV отключен, если количество строк равно нулю. Вы можете связать это с rowCallback или пользовательским событием.

var table = $('#example').DataTable(); 
if ( ! table.data().count() ) {
    table.buttons( $('a.dt-button.csv') ).disable();
}

Answer 3

var table = $('#userprofaneword-table').DataTable();
var buttons = table.buttons( ['.edit', '.delete'] );

if ( table.rows( { selected: true } ).indexes().length === 0 ) {
  buttons.disable();
}
else {
buttons.enable();
}