Laravel数据表 - 导出按钮未显示在表格中

时间:2017-12-13 07:27:11

标签: php laravel laravel-5 datatables

我正在运行PHP 7.0.25Laravel Framework 5.5.25

我使用laravel datatables package并安装/配置了button plugin

但是,我的表中没有显示任何按钮,也没有出现任何控制台错误:

enter image description here

在我的作曲家文件中,我有以下包:

"require": {
    "php": ">=7.0.0",
    "fideloper/proxy": "~3.3",
    "laravel/framework": "5.5.*",
    "laravel/tinker": "~1.0",
    "yajra/laravel-datatables": "^1.0",
    "yajra/laravel-datatables-buttons": "^3.0",
    "yajra/laravel-datatables-oracle": "~8.0"
},

我的观点如下:

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Bootstrap CSS -->
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">

        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <style>
            body {
                padding-top: 60px;
            }
        </style>
    </head>

<body>

    <table class="table table-bordered" id="task-table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Created At</th>
                <th>Updated At</th>
            </tr>
        </thead>
    </table>

<script>
$(function() {
    $('#task-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: '{!! route('datatables.data') !!}',
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        columns: [
            { data: 'id', name: 'id' },
            { data: 'name', name: 'name' },
            { data: 'created_at', name: 'created_at' },
            { data: 'updated_at', name: 'updated_at' }
        ]
    });
});
</script>


 <!-- jQuery -->
        <script src="//code.jquery.com/jquery.js"></script>
        <!-- DataTables -->
        <script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
        <!-- Bootstrap JavaScript -->
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <!-- DataTables Button -->
        <script src="//cdn.datatables.net/buttons/1.1.0/js/buttons.print.min.js"></script>
        <script type="text/javascript" src="{{URL::asset('js/buttons.server-side.js')}}"></script>

        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
    </body>
</html>       

我的控制器使用以下内容作为html函数:

public function html()
{
    return $this->builder()
                ->columns($this->getColumns())
                ->ajax('')
                ->addAction(['width' => '80px'])
                ->parameters([
                    'buttons'      => ['export', 'print', 'reset', 'reload'],
                ]);
}

为什么按钮没有出现的任何建议?

我非常感谢您的回复!

1 个答案:

答案 0 :(得分:0)

您必须定义按钮的呈现位置。看看datatables button docudom parameter中的“B”是按钮的位置

 ->parameters([
       'dom'          => 'Bfrtip',
       'buttons'      => ['export', 'print', 'reset', 'reload'],
 ]);