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

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

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

Answer 3

您可以使用JQuery根据行数禁用/启用按钮。这是一个示例，其中如果行数为零，则禁用CSV导出。您可以将其绑定到rowCallback选项或自定义事件。

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

如果没有数据，如何隐藏DataTables导出按钮？

3 个答案: