javascript - 如果没有数据，如何隐藏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>

一切正常。我可以从表中导出数据，我只想如果没有来自 Controller 的数据则隐藏导出按钮。

Answer 1

我相信您想对过滤等使用react。你只想让按钮不可见，而不是破坏 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/