Skip to content

Commit 69ae873

Browse files
committed
Add new Laravel 6 quick starter doc.
1 parent 330db4c commit 69ae873

File tree

2 files changed

+215
-1
lines changed

2 files changed

+215
-1
lines changed

documentation.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
- [Community Links](/docs/{{package}}/{{version}}/community-links)
1313

1414
- ## Tutorials
15-
- [Quick Starter](https://datatables.yajrabox.com/starter)
15+
- [Quick Starter](/docs/{{package}}/{{version}}/quick-starter)
1616
- [Service Implementation](https://datatables.yajrabox.com/service)
1717

1818
- ## Configuration

quick-starter.md

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
# Laravel 6 and DataTables Quick Starter
2+
3+
## Create new project
4+
5+
```
6+
laravel new {project name}
7+
cd {project name}
8+
cp .env.example .env
9+
php artisan key:generate
10+
```
11+
12+
## Setup database and ENV configuration
13+
14+
Create a new database and update `.env` file and set the datbase credentials.
15+
16+
## Install package and publish assets
17+
18+
```
19+
composer require yajra/laravel-datatables
20+
php artisan vendor:publish --tag=datatables-buttons
21+
22+
```
23+
24+
## Setup Laravel UI
25+
26+
```
27+
composer require laravel/ui --dev
28+
php artisan ui bootstrap --auth
29+
```
30+
31+
## Install Datatables.net assets
32+
33+
```
34+
yarn add datatables.net-bs4 datatables.net-buttons-bs4
35+
```
36+
37+
## Register datatables.net assets in bootstrap.js
38+
39+
Edit `resources/js/bootstrap.js` and add the following:
40+
41+
require('bootstrap');
42+
require('datatables.net-bs4');
43+
require('datatables.net-buttons-bs4');
44+
require('datatables.net-select-bs4');
45+
46+
## Compile assets
47+
48+
```
49+
yarn dev / watch / prod
50+
```
51+
52+
## Create controller and DataTable class
53+
54+
```
55+
php artisan make:controller UsersController
56+
php artisan datatables:make Users
57+
```
58+
59+
### UsersController
60+
61+
```php
62+
namespace App\Http\Controllers;
63+
64+
use App\DataTables\UsersDataTable;
65+
66+
class UsersController extends Controller
67+
{
68+
public function index(UsersDataTable $dataTable)
69+
{
70+
return $dataTable->render('users.index');
71+
}
72+
}
73+
```
74+
75+
### UsersDataTable
76+
77+
```php
78+
namespace App\DataTables;
79+
80+
use App\User;
81+
use Yajra\DataTables\Html\Button;
82+
use Yajra\DataTables\Html\Column;
83+
use Yajra\DataTables\Html\Editor\Editor;
84+
use Yajra\DataTables\Html\Editor\Fields;
85+
use Yajra\DataTables\Services\DataTable;
86+
87+
class UsersDataTable extends DataTable
88+
{
89+
/**
90+
* Build DataTable class.
91+
*
92+
* @param mixed $query Results from query() method.
93+
* @return \Yajra\DataTables\DataTableAbstract
94+
*/
95+
public function dataTable($query)
96+
{
97+
return datatables()
98+
->eloquent($query)
99+
->addColumn('action', 'users.action');
100+
}
101+
102+
/**
103+
* Get query source of dataTable.
104+
*
105+
* @param \App\User $model
106+
* @return \Illuminate\Database\Eloquent\Builder
107+
*/
108+
public function query(User $model)
109+
{
110+
return $model->newQuery();
111+
}
112+
113+
/**
114+
* Optional method if you want to use html builder.
115+
*
116+
* @return \Yajra\DataTables\Html\Builder
117+
*/
118+
public function html()
119+
{
120+
return $this->builder()
121+
->setTableId('users-table')
122+
->columns($this->getColumns())
123+
->minifiedAjax()
124+
->dom('Bfrtip')
125+
->orderBy(1)
126+
->buttons(
127+
Button::make('create'),
128+
Button::make('export'),
129+
Button::make('print'),
130+
Button::make('reset'),
131+
Button::make('reload')
132+
);
133+
}
134+
135+
/**
136+
* Get columns.
137+
*
138+
* @return array
139+
*/
140+
protected function getColumns()
141+
{
142+
return [
143+
Column::computed('action')
144+
->exportable(false)
145+
->printable(false)
146+
->width(60)
147+
->addClass('text-center'),
148+
Column::make('id'),
149+
Column::make('name'),
150+
Column::make('email'),
151+
Column::make('created_at'),
152+
Column::make('updated_at'),
153+
];
154+
}
155+
156+
/**
157+
* Get filename for export.
158+
*
159+
* @return string
160+
*/
161+
protected function filename()
162+
{
163+
return 'Users_' . date('YmdHis');
164+
}
165+
}
166+
```
167+
168+
## Update app layout
169+
170+
Add scripts before the body end tag of `resources/views/layouts/app.blade.php`
171+
172+
```
173+
<script src="{{ mix('js/app.js') }}"></script>
174+
<script src="{{ asset('vendor/datatables/buttons.server-side.js') }}"></script>
175+
@stack('scripts')
176+
```
177+
178+
## Create users index file
179+
180+
Create new file: `resources/views/users/index.blade.php`.
181+
182+
```php
183+
@extends('layouts.app')
184+
185+
@section('content')
186+
{{$dataTable->table()}}
187+
@endsection
188+
189+
@push('scripts')
190+
{{$dataTable->scripts()}}
191+
@endpush
192+
```
193+
194+
## Register users route
195+
196+
Update `routes/web.php`.
197+
198+
```php
199+
Route::get('/users', 'UsersController@index')->name('users.index');
200+
```
201+
202+
## Create dummy data using tinker
203+
204+
```php
205+
php artisan tinker
206+
207+
Psy Shell v0.9.9 (PHP 7.2.22 — cli) by Justin Hileman
208+
>>> factory('App\User', 100)->create()
209+
```
210+
211+
## Access Users DataTables
212+
213+
http://{project name}.test/users
214+

0 commit comments

Comments
 (0)