1
- # DataTables Quick Starter
1
+ ## DataTables Quick Starter
2
2
3
- ## Create a new Laravel project
3
+ ### Create a new Laravel project
4
4
5
5
```
6
6
laravel new datatables
7
7
cd datatables
8
8
```
9
9
10
- ## Setup Laravel UI
10
+ ### Setup Laravel UI
11
11
12
12
``` shell
13
13
composer require laravel/ui --dev
14
14
php artisan ui bootstrap --auth
15
15
```
16
16
17
- ## Install Laravel DataTables
17
+ ### Install Laravel DataTables
18
18
19
19
``` shell
20
20
composer require yajra/laravel-datatables:^9.0
21
21
```
22
22
23
- ## Setup database and ENV configuration
23
+ ### Setup database and ENV configuration
24
24
25
25
Create a new database and update ` .env ` file and set the database credentials.
26
26
@@ -37,7 +37,7 @@ DB_DATABASE=/absolute/path/to/database/database.sqlite
37
37
php artisan migrate
38
38
```
39
39
40
- ## Install Laravel DataTables Vite Assets
40
+ ### Install Laravel DataTables Vite Assets
41
41
42
42
``` shell
43
43
npm i laravel-datatables-vite --save-dev
@@ -49,7 +49,7 @@ This will install the following packages:
49
49
2 . DataTables with Buttons and Select plugins for Bootstrap 5
50
50
3 . Laravel DataTables custom scripts
51
51
52
- ## Register the package js and css
52
+ ### Register the package js and css
53
53
54
54
Edit ` resources/js/app.js ` and add the following:
55
55
@@ -77,13 +77,13 @@ Edit `resources/sass/app.scss` and add the following:
77
77
@import 'datatables.net-select-bs5/css/select.bootstrap5.css';
78
78
```
79
79
80
- ## Compile the assets
80
+ ### Compile the assets
81
81
82
82
```
83
83
npm run dev
84
84
```
85
85
86
- ## Create and update UsersDataTable
86
+ ### Create and update UsersDataTable
87
87
88
88
Create a new DataTable class:
89
89
@@ -153,7 +153,7 @@ class UsersDataTable extends DataTable
153
153
}
154
154
```
155
155
156
- ## Create and update the users controller
156
+ ### Create and update the users controller
157
157
158
158
Create a new controller and add the following:
159
159
@@ -175,7 +175,7 @@ class UsersController extends Controller
175
175
}
176
176
```
177
177
178
- ## Update the default app layout
178
+ ### Update the default app layout
179
179
180
180
Add ` @stack('scripts') ` before the body end tag of ` resources/views/layouts/app.blade.php `
181
181
@@ -190,7 +190,7 @@ Add `@stack('scripts')` before the body end tag of `resources/views/layouts/app.
190
190
</html>
191
191
```
192
192
193
- ## Create users index file
193
+ ### Create users index file
194
194
195
195
Create new file: ` resources/views/users/index.blade.php ` .
196
196
@@ -213,7 +213,7 @@ Create new file: `resources/views/users/index.blade.php`.
213
213
@endpush
214
214
```
215
215
216
- ## Register users route
216
+ ### Register users route
217
217
218
218
Update ` routes/web.php ` .
219
219
@@ -223,7 +223,7 @@ use App\Http\Controllers\UsersController;
223
223
Route::get('/users', [UsersController::class, 'index'])->name('users.index');
224
224
```
225
225
226
- ## Create dummy data using tinker
226
+ ### Create dummy data using tinker
227
227
228
228
``` php
229
229
php artisan tinker
@@ -232,7 +232,7 @@ Psy Shell v0.9.9 (PHP 7.2.22 — cli) by Justin Hileman
232
232
>>> User::factory(100)->create()
233
233
```
234
234
235
- ## Access Users DataTables
235
+ ### Access Users DataTables
236
236
237
237
http://datatables.test/users
238
238
0 commit comments