带有数据表的 Laravel 5.4

Question

我已将此包 https://github.com/yajra/laravel-datatables 添加到我的包中，我正在尝试在我的应用程序中使用它。

这是风景

@section('content')
    <table class="table table-bordered" id="users-table">
        <thead>
            <tr>
                <th>Emp No</th>
                 <th>Birth Date</th>
                  <th>First Name</th>
                   <th>Last Name</th>
                    <th>Gender</th>
                     <th>Hire Date</th>

            </tr>
        </thead>
    </table>
@stop

@push('scripts')

<script type="text/javascript">
$(function() {
    $('#users-table').DataTable({
        processing: true,
        serverSide: true,
        responsive: true,
        ajax: 'http://localhost:8000/tasks',
        columns: [
            { data: 'emp_no', name: 'emp_no' }
            { data: 'birth_date', name: 'birth_date' },
            { data: 'first_name', name: 'first_name' },
            { data: 'last_name', name: 'last_name' },
            { data: 'gender', name: 'gender' },
            { data: 'hire_date', name: 'hire_date' }
        ]
    });
});
</script>

@endpush
@endsection

这是路线

Route::get('tasks', 'PrototypeController@getTasks')->name('datatable.tasks');

这是控制器

public function getTasks()
    {
       return Datatables::of(Employees::query())->make(true);
       //returns json
    }

此代码加载包含数据表的视图。

url http://localhost:8000/tasks 在 Web 浏览器中返回 json，但数据表从未在我的视图中呈现。当我查看视图时，没有浏览器错误。

可能是什么问题？

Answer 1

创建两种方法，一种显示我们的视图，另一种方法将处理我们的数据表 ajax 请求。

展示我们的观点

public function viewTasks()
{
    return view('Tasks.index');
}

处理我们的数据表 ajax 请求

public function getTasks()
{
    return Datatables::of(Employees::query())->make(true);
}

参考链接：-Yajra Datatable

Answer 2

你应该改变你的控制器。在下面添加代码以显示数据表：

 public function task()
    {
        return view('datatables.Index');
    }

更改web.php 文件以添加新路由：

Route::get( 'employee','PrototypeController@task');

添加数据表CDN和bootstrap

<link href="https://datatables.yajrabox.com/css/app.css" rel="stylesheet">
    <link href="https://datatables.yajrabox.com/css/datatables.bootstrap.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,300|Open+Sans:400,600,700,800' rel='stylesheet'
          type='text/css'>