diff --git a/add-column.md b/add-column.md index 92e82c0..55191fd 100644 --- a/add-column.md +++ b/add-column.md @@ -1,14 +1,14 @@ # Add Column -You can add a custom column on your response by using `addColumn` api. +You can add a custom column to your response by using the `addColumn` api. -> {note} added columns are assumed to be computed columns and not part of the database. Thus, search/sort will be disabled on those columns. If you need them, use the `editColumn` api instead. +> {note} added columns are assumed to be computed columns and not part of the database. Thus, search/sort will be disabled for those columns. If you need them, use the `editColumn` api instead. ## Add Column with Blade Syntax ```php -use DataTables; +use Yajra\DataTables\Facades\DataTables; Route::get('user-data', function() { $model = App\User::query(); @@ -23,7 +23,7 @@ Route::get('user-data', function() { ## Add Column with Closure ```php -use DataTables; +use Yajra\DataTables\Facades\DataTables; Route::get('user-data', function() { $model = App\User::query(); @@ -42,7 +42,7 @@ Route::get('user-data', function() { > {tip} You can use view to render your added column by passing the view path as the second argument on `addColumn` api. ```php -use DataTables; +use Yajra\DataTables\Facades\DataTables; Route::get('user-data', function() { $model = App\User::query(); @@ -64,7 +64,7 @@ Hi {{ $name }}! > {tip} Just pass the column order as the third argument of `addColumn` api. ```php -use DataTables; +use Yajra\DataTables\Facades\DataTables; Route::get('user-data', function() { $model = App\User::query(); diff --git a/buttons-config.md b/buttons-config.md index 5b4260d..817b62e 100644 --- a/buttons-config.md +++ b/buttons-config.md @@ -12,8 +12,8 @@ Namespace configuration is used by the datatables command generator. ``` ### DataTable Base Namespace/Directory -This is the base namespace/directory to be created when a new DataTable was called. -This directory is appended on default Laravel namespace. +This is the base namespace/directory to be created when a new DataTable is called. +This directory is appended to the default Laravel namespace. **Usage:** ```php artisan datatables:make User``` @@ -24,8 +24,8 @@ This directory is appended on default Laravel namespace. **Export filename:** ```users_(timestamp)``` ### Model Option -This is the base namespace/directory where your model's are located. -This directory is appended on default Laravel namespace. +This is the base namespace/directory where your models are located. +This directory is appended to the default Laravel namespace. **Usage:** ```php artisan datatables:make Post --model``` **Output:** ```App\DataTables\PostDataTable``` **With Model:** ```App\Post`` @@ -33,7 +33,7 @@ This directory is appended on default Laravel namespace. ## PDF Generator -Set the PDF generator to be used when converting your dataTable to pdf. +Set the PDF generator to be used when converting your dataTable to PDF. Available generators are: `excel`, `snappy` diff --git a/buttons-console.md b/buttons-console.md index 7e88422..0efc0fc 100644 --- a/buttons-console.md +++ b/buttons-console.md @@ -18,7 +18,7 @@ In this example, we will create a DataTable service class. php artisan datatables:make Posts ``` -This will create an `PostsDataTable` class on `app\DataTables` directory. +This will create a `PostsDataTable` class in the `app\DataTables` directory. ```php namespace App\DataTables; @@ -101,7 +101,7 @@ In this example, we will pass a `--model` option to set the model to be used by php artisan datatables:make Posts --model ``` -This will generate a `App\DataTables\PostsDataTable` class that uses `App\Post` as the base model for our query. +This will generate an `App\DataTables\PostsDataTable` class that uses `App\Post` as the base model for our query. The exported filename will also be set to `posts_(timestamp)`. ```php @@ -194,12 +194,12 @@ This will allow to use a non-standard namespace if front-end and back-end models ### Action Option -In this example, we will pass a `--action` option to set a custom path for the action column view. +In this example, we will use the `--action` option to set a custom path for the action column view. ``` php artisan datatables:make Posts --action="client.action" ``` -If not provided, a default path will be used. It will needs to be changed thereafter. +If no path is provided, a default path will be used. It will need to be changed thereafter. ### Columns Option @@ -208,13 +208,13 @@ In this example, we will pass a `--columns` option to set the columns to be used ``` php artisan datatables:make Posts --columns="id,title,author" ``` -If not provided, a default set of columns will be used. It will needs to be manually changed thereafter. +If not provided, a default set of columns will be used. It will need to be manually changed thereafter. ## Creating a DataTable Scope service class -DataTable scope is class that we can use to limit our database search results based on the defined query scopes. +DataTable scope is a class that we can use to limit our database search results based on the defined query scopes. ``` php artisan datatables:scope ActiveUser diff --git a/buttons-custom.md b/buttons-custom.md index 9330875..089a318 100644 --- a/buttons-custom.md +++ b/buttons-custom.md @@ -1,9 +1,9 @@ # Custom Actions -You can enable custom actions on your buttons, as follows: +You can enable custom actions on your buttons as follows: Update `UsersDataTable` class and overload the `actions` property. Here we are -disabling the `csv` and `pdf` action (so they cannot be fired by hijacking the +disabling the `csv` and `pdf` actions (so they cannot be fired by hijacking their request) and enabling a `myCustomAction`. @@ -15,7 +15,7 @@ use Yajra\DataTables\Services\DataTable; class UsersDataTable extends DataTable { - protected $actions = ['print', 'excel', 'myCustomAction']; + protected array $actions = ['print', 'excel', 'myCustomAction']; public function html() { diff --git a/buttons-fast-excel.md b/buttons-fast-excel.md index fa04177..4d0819e 100644 --- a/buttons-fast-excel.md +++ b/buttons-fast-excel.md @@ -9,14 +9,14 @@ FastExcel integration uses cursor behind the scene thus eager loaded columns wil ## Usage 1. Install `fast-excel` using `composer require rap2hpoutre/fast-excel`. -2. Create a dataTable class `php artisan datatables:make Users` +2. Create a dataTable class `php artisan datatables:make Users`. 3. Adjust `UsersDataTable` as needed. 4. Set property `$fastExcel = true`. ```php class UsersDataTable extends DataTable { - protected $fastExcel = true; + protected bool $fastExcel = true; ... } @@ -32,12 +32,12 @@ class UsersDataTable extends DataTable ```php class UsersDataTable extends DataTable { - protected $fastExcel = true; - protected $fastExcelCallback = false; + protected bool $fastExcel = true; + protected bool $fastExcelCallback = false; ``` -2. Exported file will now be based on how your query was structured. No header formatting and all selected columns in sql will be included in the output. +2. The exported file will now be based on your query's structure. No header formatting and all selected columns in sql will be included in the output. ## Using custom callback @@ -46,9 +46,9 @@ Just override the `fastExcelCallback` method: ```php class UsersDataTable extends DataTable { - protected $fastExcel = true; + protected bool $fastExcel = true; - public function fastExcelCallback() + public function fastExcelCallback() \Closure { return function ($row) { return [ @@ -59,4 +59,4 @@ class UsersDataTable extends DataTable } ... -``` \ No newline at end of file +``` diff --git a/buttons-installation.md b/buttons-installation.md index 424966c..b6aec3e 100644 --- a/buttons-installation.md +++ b/buttons-installation.md @@ -1,13 +1,20 @@ -# Buttons Plugin Installation +# Buttons Plugin -Github: https://github.com/yajra/laravel-datatables-buttons +A Laravel DataTables plugin for handling server-side exporting of table as csv, excel, pdf, etc. + + +## Installation Run the following command in your project to get the latest version of the plugin: -`composer require yajra/laravel-datatables-buttons:^9.0` +```bash +composer require yajra/laravel-datatables-buttons:"^12.0" +``` + ## Configuration -> This step is optional if you are using Laravel 5.5 + +> This step is optional if you are using Laravel 5.5+ Open the file ```config/app.php``` and then add following service provider. @@ -21,6 +28,6 @@ Open the file ```config/app.php``` and then add following service provider. After completing the step above, use the following command to publish configuration & assets: -``` +```bash php artisan vendor:publish --tag=datatables-buttons ``` diff --git a/documentation.md b/documentation.md index 9a7b5e9..14788f5 100644 --- a/documentation.md +++ b/documentation.md @@ -2,18 +2,15 @@ - [Release Notes](/docs/{{package}}/{{version}}/releases) - [Upgrade Guide](/docs/{{package}}/{{version}}/upgrade) - [Contribution Guide](/docs/{{package}}/{{version}}/contributing) - - [Security Issues](/docs/{{package}}/{{version}}/security) - - [API Documentation](http://yajra.github.io/{{package}}/api/{{version}}) + - [Security Issues](/docs/{{package}}/{{version}}/security) - ## Getting Started - [Introduction](/docs/{{package}}/{{version}}/introduction) - - [Installation](/docs/{{package}}/{{version}}/installation) - - [Demo Application](https://datatables.yajrabox.com/) + - [Installation](/docs/{{package}}/{{version}}/installation) - [Community Links](/docs/{{package}}/{{version}}/community-links) - ## Tutorials - - [Quick Starter](/docs/{{package}}/{{version}}/quick-starter) - - [Service Implementation](https://datatables.yajrabox.com/service) + - [Quick Starter](/docs/{{package}}/{{version}}/quick-starter) - ## Configuration - [General Settings](/docs/{{package}}/{{version}}/general-settings) @@ -64,7 +61,7 @@ - [Order By Nulls Last](/docs/{{package}}/{{version}}/order-by-nulls-last) - ## SearchPanes - - [Add SearchPanes](/docs/{{package}}/{{version}}/search-panes-starter) + - [SearchPanes Extension](/docs/{{package}}/{{version}}/search-panes-starter) - [Hide Columns in SearchPanes](/docs/{{package}}/{{version}}/search-panes-hide-columns) - [Further options](/docs/{{package}}/{{version}}/search-panes-options) @@ -79,7 +76,7 @@ ### PLUGINS -- ## HTML Builder +- ## Html - [Installation](/docs/{{package}}/{{version}}/html-installation) - [Builder](/docs/{{package}}/{{version}}/html-builder) - [Table](/docs/{{package}}/{{version}}/html-builder-table) diff --git a/editor-installation.md b/editor-installation.md index c4c95b6..7bed304 100644 --- a/editor-installation.md +++ b/editor-installation.md @@ -11,14 +11,16 @@ A [premium license](https://editor.datatables.net/purchase/index) is required to Run the following command in your project to get the latest version of the plugin: -`composer require yajra/laravel-datatables-editor:^1.0` +```bash +composer require yajra/laravel-datatables-editor:"^12.0" +``` ## Configuration > This step is optional if you are using Laravel 5.5 -Open the file ```config/app.php``` and then add following service provider. +Open the file ```config/app.php``` and then add the following service provider. ```php 'providers' => [ diff --git a/editor-tutorial.md b/editor-tutorial.md index cf453b2..caff59b 100644 --- a/editor-tutorial.md +++ b/editor-tutorial.md @@ -1,15 +1,11 @@ -# Creating a Laravel Full CRUD with DataTables Editor. +# Laravel 10 CRUD with DataTables Editor. Before we begin, please be reminded that the Editor library that we are going to use here requires a paid license. See [DataTables Editor](https://editor.datatables.net/purchase/index) for details. ## Pre-requisites -This tutorial requires https://yajrabox.com/docs/laravel-datatables/master/quick-starter. - -## Install DataTables Editor assets. - - yarn add datatables.net-editor datatables.net-editor-bs4 datatables.net-select-bs4 +This tutorial requires https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter. ## Editor License @@ -17,107 +13,162 @@ Copy and rename your `Editor.XX.zip` to `Editor.zip` and move it to project fold ## Register postinstall script to package.json +```json "scripts": { - "postinstall": "node ./node_modules/datatables.net-editor/install.js ./Editor.zip", - "dev": "npm run development", - ..... + "dev": "vite", + "build": "vite build", + "postinstall": "node node_modules/datatables.net-editor/install.js ./Editor.zip" }, +``` -## Register editor script on `resources/js/bootstrap.js` - - try { - window.Popper = require('popper.js').default; - window.$ = window.jQuery = require('jquery'); - - require('bootstrap'); - require('datatables.net-bs4'); - require('datatables.net-buttons-bs4'); - require('datatables.net-select-bs4'); - require('datatables.net-editor-bs4'); - } catch (e) {} +## Install DataTables Editor assets. +```sh +npm i datatables.net-editor datatables.net-editor-bs5 +``` -## Add editor styles on `resources/sass/app.scss`. +## Register editor script on `resources/js/app.js` - @import "~datatables.net-select-bs4/css/select.bootstrap4.css"; - @import "~datatables.net-editor-bs4/css/editor.bootstrap4.css"; +```js +import './bootstrap'; +import 'laravel-datatables-vite'; -## Recompile assets. +import "datatables.net-editor"; +import Editor from "datatables.net-editor-bs5"; +Editor(window, $); +``` - yarn - yarn watch / dev / prod +## Add editor styles on `resources/sass/app.scss`. +```css +// Fonts +@import url('https://fonts.bunny.net/css?family=Nunito'); -## Update UsersDataTable and register the Editor buttons. +// Variables +@import 'variables'; -> Note: CREATE button is in conflict with `buttons.server-side.js`. You need to remove the create button or rename it to something else like `add` button. +// Bootstrap +@import 'bootstrap/scss/bootstrap'; - DataTable.ext.buttons.add = { - className: 'buttons-add', +// DataTables +@import 'bootstrap-icons/font/bootstrap-icons.css'; +@import "datatables.net-bs5/css/dataTables.bootstrap5.css"; +@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.css"; +@import "datatables.net-editor-bs5/css/editor.bootstrap5.css"; +@import 'datatables.net-select-bs5/css/select.bootstrap5.css'; +``` - text: function (dt) { - return ' ' + dt.i18n('buttons.add', 'Create'); - }, +## Recompile assets. - action: function (e, dt, button, config) { - window.location = window.location.href.replace(/\/+$/, "") + '/create'; - } - }; +```sh +npm run dev +``` ### UsersDataTable.php Create a new editor instance and add some fields for name and email. ```php +namespace App\DataTables; + +use App\Models\User; +use Illuminate\Database\Eloquent\Builder as QueryBuilder; +use Yajra\DataTables\EloquentDataTable; +use Yajra\DataTables\Html\Builder as HtmlBuilder; +use Yajra\DataTables\Html\Button; +use Yajra\DataTables\Html\Column; use Yajra\DataTables\Html\Editor\Editor; use Yajra\DataTables\Html\Editor\Fields; +use Yajra\DataTables\Services\DataTable; -... +class UsersDataTable extends DataTable +{ /** * Build DataTable class. * - * @param mixed $query Results from query() method. - * @return \Yajra\DataTables\DataTableAbstract + * @param QueryBuilder $query Results from query() method. + * @return \Yajra\DataTables\EloquentDataTable */ - public function dataTable($query) + public function dataTable(QueryBuilder $query): EloquentDataTable { - return datatables() - ->eloquent($query) - ->setRowId('id') // Set the RowID - ... + return (new EloquentDataTable($query))->setRowId('id'); } - public function html() + /** + * Get query source of dataTable. + * + * @param \App\Models\User $model + * @return \Illuminate\Database\Eloquent\Builder + */ + public function query(User $model): QueryBuilder + { + return $model->newQuery(); + } + + /** + * Optional method if you want to use html builder. + * + * @return \Yajra\DataTables\Html\Builder + */ + public function html(): HtmlBuilder { return $this->builder() ->setTableId('users-table') ->columns($this->getColumns()) ->minifiedAjax() - ->dom('Bfrtip') ->orderBy(1) - ->buttons( + ->selectStyleSingle() + ->editors([ + Editor::make() + ->fields([ + Fields\Text::make('name'), + Fields\Text::make('email'), + ]), + ]) + ->buttons([ Button::make('create')->editor('editor'), Button::make('edit')->editor('editor'), Button::make('remove')->editor('editor'), - Button::make('export'), + Button::make('excel'), + Button::make('csv'), + Button::make('pdf'), Button::make('print'), Button::make('reset'), - Button::make('reload') - ) - ->editor( - Editor::make() - ->fields([ - Fields\Text::make('name'), - Fields\Text::make('email'), - Fields\Password::make('password'), - ]) - ); + Button::make('reload'), + ]); + } + + /** + * Get the dataTable columns definition. + * + * @return array + */ + public function getColumns(): array + { + return [ + Column::make('id'), + Column::make('name'), + Column::make('email'), + Column::make('created_at'), + Column::make('updated_at'), + ]; + } + + /** + * Get filename for export. + * + * @return string + */ + protected function filename(): string + { + return 'Users_'.date('YmdHis'); } +} ``` ## Create Editor Class to handle CRUD actions. -``` +```sh php artisan datatables:editor Users ``` @@ -125,13 +176,14 @@ php artisan datatables:editor Users Edit `routes/web.php` and register the store user route. -``` -Route::post('/users', 'UsersController@store')->name('users.store'); +```php +Route::get('/users', [App\Http\Controllers\UsersController::class, 'index'])->name('users.index'); +Route::post('/users', [App\Http\Controllers\UsersController::class, 'store'])->name('users.store'); ``` ## Update users controller -``` +```php namespace App\Http\Controllers; use Illuminate\Http\Request; diff --git a/engine-collection.md b/engine-collection.md index 3b8bed0..418ccc4 100644 --- a/engine-collection.md +++ b/engine-collection.md @@ -1,7 +1,7 @@ # Collection Data Source You may use Laravel's Collection as data source for your dataTables. -You can look at `Yajra\DataTables\CollectionDataTable` class which handles the conversion of your Collection into a readbale DataTable API response. +You can look at `Yajra\DataTables\CollectionDataTable` class which handles the conversion of your Collection into a readable DataTable API response. ## Collection via Factory diff --git a/engine-eloquent.md b/engine-eloquent.md index e2874c9..f68e4d0 100644 --- a/engine-eloquent.md +++ b/engine-eloquent.md @@ -1,7 +1,7 @@ # Eloquent Data Source You may use Laravel's Eloquent Model as data source for your dataTables. -You can look at `Yajra\DataTables\EloquentDataTable` class which handles the conversion of your Eloquent Model into a readbale DataTable API response. +You can look at `Yajra\DataTables\EloquentDataTable` class which handles the conversion of your Eloquent Model into a readable DataTable API response. ## Eloquent via Factory diff --git a/engine-query.md b/engine-query.md index e800e53..700e6e9 100644 --- a/engine-query.md +++ b/engine-query.md @@ -27,7 +27,7 @@ use DataTables; Route::get('user-data', function() { $query = DB::table('users'); - return DataTables::queryBuilder($query)->toJson(); + return DataTables::query($query)->toJson(); }); ``` @@ -41,7 +41,7 @@ use Yajra\DataTables\DataTables; Route::get('user-data', function(DataTables $dataTables) { $query = DB::table('users'); - return $dataTables->queryBuilder($query)->toJson(); + return $dataTables->query($query)->toJson(); }); ``` @@ -53,7 +53,7 @@ use DB; Route::get('user-data', function() { $query = DB::table('users'); - return app('datatables')->queryBuilder($query)->toJson(); + return app('datatables')->query($query)->toJson(); }); ``` diff --git a/exports-installation.md b/exports-installation.md index 79dd9fa..59afb4e 100644 --- a/exports-installation.md +++ b/exports-installation.md @@ -7,7 +7,7 @@ This package is a plugin of Laravel DataTables for handling server-side exportin ## Quick Installation ``` -composer require yajra/laravel-datatables-export -W +composer require yajra/laravel-datatables-export:"^12.0" ``` The package also requires batch job: @@ -27,4 +27,4 @@ Yajra\DataTables\ExportServiceProvider::class ``` $ php artisan vendor:publish --tag=datatables-export --force -``` \ No newline at end of file +``` diff --git a/filter-column.md b/filter-column.md index a0e9f88..81e4734 100644 --- a/filter-column.md +++ b/filter-column.md @@ -4,11 +4,12 @@ In some cases, we need to implement a custom search for a specific column. To achieve this, you can use `filterColumn` api. ```php -use DataTables; -use DB; +use Yajra\DataTables\Facades\DataTables; +use Illuminate\Support\Facades\DB; +use App\User; Route::get('user-data', function() { - $model = App\User::select([ + $model = User::query()->select([ 'id', DB::raw("CONCAT(users.first_name,'-',users.last_name) as fullname"), 'email', diff --git a/fractal-installation.md b/fractal-installation.md index e210f6b..e717b4d 100644 --- a/fractal-installation.md +++ b/fractal-installation.md @@ -4,7 +4,9 @@ Github: https://github.com/yajra/laravel-datatables-fractal Run the following command in your project to get the latest version of the plugin: -`composer require yajra/laravel-datatables-fractal:^9.0` +```bash +composer require yajra/laravel-datatables-fractal:"^12.0" +``` ## Configuration > This step is optional if you are using Laravel 5.5 diff --git a/html-builder-table.md b/html-builder-table.md index 285a6da..ed75ea0 100644 --- a/html-builder-table.md +++ b/html-builder-table.md @@ -8,7 +8,8 @@ Table api accepts two parameters: `$builder->table(array $attributes, $footer = ## Table Example with Footer ```php -use DataTables; +use Illuminate\Support\Facades\Route; +use Yajra\DataTables\Facades\DataTables; use Yajra\DataTables\Html\Builder; Route::get('users', function(Builder $builder) { diff --git a/html-builder.md b/html-builder.md index 7faf9c1..4339798 100644 --- a/html-builder.md +++ b/html-builder.md @@ -11,6 +11,7 @@ You can use the `Builder` class by using Dependency Injection. use Yajra\DataTables\Html\Builder; Route::get('users', function(Builder $builder) { + // }); ``` @@ -37,37 +38,38 @@ Route::get('users', function(DataTables $dataTable) { ## Html Builder Example -```php -use DataTables; +```php filename=routes/web.php +use Yajra\DataTables\Facades\DataTables; use Yajra\DataTables\Html\Builder; +use Yajra\DataTables\Html\Column; +use App\Models\User; Route::get('users', function(Builder $builder) { - if (request()->ajax()) { + if (request()->ajax()) { return DataTables::of(User::query())->toJson(); } - $html = $builder->columns([ - ['data' => 'id', 'name' => 'id', 'title' => 'Id'], - ['data' => 'name', 'name' => 'name', 'title' => 'Name'], - ['data' => 'email', 'name' => 'email', 'title' => 'Email'], - ['data' => 'created_at', 'name' => 'created_at', 'title' => 'Created At'], - ['data' => 'updated_at', 'name' => 'updated_at', 'title' => 'Updated At'], - ]); + $html = $builder->columns([ + Column::make('id'), + Column::make('name'), + Column::make('email'), + Column::make('created_at'), + Column::make('updated_at'), + ]); - return view('users.index', compact('html')); + return view('users.index', compact('html')); }); ``` -On your `resources/views/users/index.blade.php`. -```php +```php filename=resources/views/users/index.blade.php @extends('app') @section('contents') - {!! $html->table() !!} + {{ $html->table() }} @endsection @push('scripts') - {!! $html->scripts() !!} + {{ $html->scripts() }} @endpush ``` diff --git a/html-installation.md b/html-installation.md index 507ce61..534ac95 100644 --- a/html-installation.md +++ b/html-installation.md @@ -6,7 +6,9 @@ Github: https://github.com/yajra/laravel-datatables-html Run the following command in your project to get the latest version of the plugin: -`composer require yajra/laravel-datatables-html:^9.0` +```bash +composer require yajra/laravel-datatables-html:"^12.0" +``` ## Configuration diff --git a/installation.md b/installation.md index 2db07f1..8be648b 100644 --- a/installation.md +++ b/installation.md @@ -11,8 +11,8 @@ ### Requirements -- [Laravel 9+](https://github.com/laravel/framework) -- [jQuery DataTables v1.10.x](http://datatables.net/) +- [Laravel 12](https://github.com/laravel/framework) +- [DataTables 1.x|2.x](http://datatables.net/) ### Installing Laravel DataTables @@ -22,20 +22,20 @@ Laravel DataTables can be installed with [Composer](http://getcomposer.org/doc/0 Run the following command in your project to get the latest version of the package: ```bash -composer require yajra/laravel-datatables-oracle:"^10.0" +composer require yajra/laravel-datatables-oracle:"^12.0" ``` -If you are using most of the DataTables plugins like Buttons & Html, you can alternatively use the all-in-one installer package. +If you use most of the DataTables plugins like Buttons & HTML, you can use the all-in-one installer package. ```bash -composer require yajra/laravel-datatables:^9.0 +composer require yajra/laravel-datatables:"^12.0" ``` ### Configuration > This step is optional if you are using Laravel 5.5+ -Open the file ```config/app.php``` and then add following service provider. +Open the file ```config/app.php``` or ```bootstrap/providers.php``` for Laravel 12 then add following service provider. ```php 'providers' => [ @@ -46,7 +46,7 @@ Open the file ```config/app.php``` and then add following service provider. After completing the step above, use the following command to publish configuration & assets: -``` +```bash php artisan vendor:publish --tag=datatables ``` diff --git a/introduction.md b/introduction.md index fc30ba1..aaa9b08 100644 --- a/introduction.md +++ b/introduction.md @@ -20,13 +20,10 @@ Official documentation of DataTables is available at [datatables.net](https://da ## Laravel DataTables -[](https://gitter.im/yajra/laravel-datatables?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) [](https://packagist.org/packages/yajra/laravel-datatables-oracle) -[](http://laravel.com) [](https://packagist.org/packages/yajra/laravel-datatables-oracle) -[](https://travis-ci.org/yajra/laravel-datatables) -[](https://scrutinizer-ci.com/g/yajra/{{package}}/?branch=master) + [](https://packagist.org/packages/yajra/laravel-datatables-oracle) Laravel DataTables is a package that handles the [server-side](https://www.datatables.net/manual/server-side) works of [DataTables](http://datatables.net) using [Laravel](http://laravel.com). diff --git a/quick-starter.md b/quick-starter.md index 57c976b..fe09e60 100644 --- a/quick-starter.md +++ b/quick-starter.md @@ -1,161 +1,140 @@ -# DataTables Quick Starter +# Quick Starter -## Create new project + +## 01. Installing Laravel & DataTables -``` +### Quick Installation + +If you have already installed [Laravel Installer](https://laravel.com/docs#your-first-laravel-project) on your local machine, you may create a new project via laravel command: + +```shell laravel new datatables -cd datatables -cp .env.example .env -php artisan key:generate ``` -## Setup database and ENV configuration +After the project has been created, we will then install [Laravel UI](https://github.com/laravel/ui) and [Yajra DataTables](https://github.com/yajra/laravel-datatables) -Create a new database and update `.env` file and set the datbase credentials. - -## Install package and publish assets +```shell +cd datatables + +composer require laravel/ui --dev +php artisan ui bootstrap --auth -``` composer require yajra/laravel-datatables -php artisan vendor:publish --tag=datatables-buttons - ``` -## Setup Laravel UI +For simplicity, you may use SQLite to store your application's data. To instruct Laravel to use SQLite instead of MySQL, update your new application's `.env` file and remove all of the `DB_*` environment variables except for the `DB_CONNECTION` variable, which should be set to `sqlite`: +```shell +touch database/database.sqlite ``` -composer require laravel/ui --dev -php artisan ui bootstrap --auth + +```dotenv filename=.env +DB_CONNECTION=sqlite ``` -## Install Datatables.net assets + +## 02. Install Laravel DataTables Vite -``` -yarn add datatables.net-bs4 datatables.net-buttons-bs4 datatables.net-select-bs4 datatables.net-searchpanes-bs4 +Next, we will install [Laravel DataTables Vite](https://github.com/yajra/laravel-datatables-vite) to simplify our frontend setup. + +```shell +npm i laravel-datatables-vite --save-dev ``` -> {tip} datatables.net-select-bs4` and `datatables.net-searchpanes-bs4` are only required if you want to use SearchPanes +This will install the following packages: -## Register datatables.net assets in bootstrap.js and app.scss +``` + - Bootstrap Icons + - DataTables with Buttons and Select plugins for Bootstrap 5 + - Laravel DataTables custom scripts +``` -Edit `resources/js/bootstrap.js` and add the following: +Once installed, we can now configure our scripts and css needed for our application. - require('bootstrap'); - require('datatables.net-bs4'); - require('datatables.net-buttons-bs4'); - require('datatables.net-select-bs4'); - require('datatables.net-searchpanes-bs4'); +```js filename=resources/js/app.js +import './bootstrap'; +import 'laravel-datatables-vite'; +``` -Edit `resources/scss/app.scss` and add the following: +```postcss filename=resources/sass/app.scss +// Fonts +@import url('https://fonts.bunny.net/css?family=Nunito'); - // DataTables - @import "~datatables.net-bs4/css/dataTables.bootstrap4.css"; - @import "~datatables.net-buttons-bs4/css/buttons.bootstrap4.css"; - @import '~datatables.net-select-bs4/css/select.dataTables.css'; - @import '~datatables.net-searchpanes-dt/css/searchPanes.dataTables.css'; +// Variables +@import 'variables'; -## Compile assets +// Bootstrap +@import 'bootstrap/scss/bootstrap'; -``` -yarn dev / watch / prod +// DataTables +@import 'bootstrap-icons/font/bootstrap-icons.css'; +@import "datatables.net-bs5/css/dataTables.bootstrap5.min.css"; +@import "datatables.net-buttons-bs5/css/buttons.bootstrap5.min.css"; +@import 'datatables.net-select-bs5/css/select.bootstrap5.css'; ``` -## Create controller and DataTable class +We just need to start the Vite development server to automatically recompile our JS, CSS and refresh the browser when we make changes to our Blade templates: -``` -php artisan make:controller UsersController -php artisan datatables:make Users +```shell +npm run dev ``` -### UsersController + +## 03. Setup a Users DataTable -```php -namespace App\Http\Controllers; +Open a new terminal in your `datatables` project directory and run the following command: -use App\DataTables\UsersDataTable; - -class UsersController extends Controller -{ - public function index(UsersDataTable $dataTable) - { - return $dataTable->render('users.index'); - } -} +```shell +php artisan datatables:make Users ``` -### UsersDataTable +Next, we will configure our `UsersDataTable` and add the columns that we want to display. -```php +```php filename=app/DataTables/UsersDataTable.php namespace App\DataTables; -use App\User; +use App\Models\User; +use Illuminate\Database\Eloquent\Builder as QueryBuilder; +use Yajra\DataTables\EloquentDataTable; +use Yajra\DataTables\Html\Builder as HtmlBuilder; use Yajra\DataTables\Html\Button; use Yajra\DataTables\Html\Column; -use Yajra\DataTables\Html\Editor\Editor; -use Yajra\DataTables\Html\Editor\Fields; use Yajra\DataTables\Services\DataTable; class UsersDataTable extends DataTable { - /** - * Build DataTable class. - * - * @param mixed $query Results from query() method. - * @return \Yajra\DataTables\DataTableAbstract - */ - public function dataTable($query) + public function dataTable(QueryBuilder $query): EloquentDataTable { - return datatables() - ->eloquent($query) - ->addColumn('action', 'users.action'); + return (new EloquentDataTable($query))->setRowId('id'); } - /** - * Get query source of dataTable. - * - * @param \App\User $model - * @return \Illuminate\Database\Eloquent\Builder - */ - public function query(User $model) + public function query(User $model): QueryBuilder { return $model->newQuery(); } - /** - * Optional method if you want to use html builder. - * - * @return \Yajra\DataTables\Html\Builder - */ - public function html() + public function html(): HtmlBuilder { return $this->builder() ->setTableId('users-table') ->columns($this->getColumns()) ->minifiedAjax() - ->dom('Bfrtip') ->orderBy(1) - ->buttons( - Button::make('create'), - Button::make('export'), + ->selectStyleSingle() + ->buttons([ + Button::make('add'), + Button::make('excel'), + Button::make('csv'), + Button::make('pdf'), Button::make('print'), Button::make('reset'), - Button::make('reload') - ); + Button::make('reload'), + ]); } - /** - * Get columns. - * - * @return array - */ - protected function getColumns() + public function getColumns(): array { return [ - Column::computed('action') - ->exportable(false) - ->printable(false) - ->width(60) - ->addClass('text-center'), Column::make('id'), Column::make('name'), Column::make('email'), @@ -164,62 +143,96 @@ class UsersDataTable extends DataTable ]; } - /** - * Get filename for export. - * - * @return string - */ - protected function filename() + protected function filename(): string { - return 'Users_' . date('YmdHis'); + return 'Users_'.date('YmdHis'); } } ``` -## Update app layout + +## 04. Setup a Users Controller, View & Route -Add scripts before the body end tag of `resources/views/layouts/app.blade.php` - -``` - - - @stack('scripts') +```shell +php artisan make:controller UsersController ``` -## Create users index file +```php filename=app/Http/Controllers/UsersController.php +namespace App\Http\Controllers; -Create new file: `resources/views/users/index.blade.php`. +use App\DataTables\UsersDataTable; -```php +class UsersController extends Controller +{ + public function index(UsersDataTable $dataTable) + { + return $dataTable->render('users.index'); + } +} +``` + +```blade filename=resources/views/users/index.blade.php @extends('layouts.app') @section('content') - {{$dataTable->table()}} +