如果没有数据，如何隐藏DataTables导出按钮? [英] How to hide DataTables export button if no data?

问题描述

我正在laravel做项目.我已经将DataTables实现为

I am doing project in laravel. I have implemented DataTables as,

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>

一切正常.我可以从表中导出数据，如果没有数据来自控制器，我只想隐藏导出按钮.

Every thing works fine. I can export data from table, I just want hide export button if there is no data coming from controller.

推荐答案

我相信您想对过滤等做出反应.您只想使按钮不可见，而不破坏DOM布局.您可以使用drawCallback并根据行的存在设置visibility:

I believe you want to react on filtering and so on. And you just want to make the button invisible, not break the DOM layout. You can use drawCallback and set visibility according to the presence of rows :

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

这是一个演示-> https://jsfiddle.net/okednaqg/

Here is a demo -> https://jsfiddle.net/okednaqg/

这篇关于如果没有数据，如何隐藏DataTables导出按钮?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！