Laravel Jquery Yajra DataTable Everything for Yajra 10.x with New changes
¶What is Laravel DataTable
DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, and will add advanced interaction controls to any HTML table. Laravel DataTable is a Laravel package to support that. It uses that JQuery library and makes a Good looking UI for big table with searching, sorting, pagination and many more.
** Documentation: ** https://yajrabox.com/docs/laravel-datatables/10.0
¶How to Install
Basic doc link - https://yajrabox.com/docs/laravel-datatables/10.0/installation
** Install Composer command - **
composer require yajra/laravel-datatables:^9.0
Inside config/app.php ’s providers array append this line -
'providers' => [
// ...
Yajra\DataTables\DataTablesServiceProvider::class,
],
**Publish the vendors - **
php artisan vendor:publish --tag=datatables
¶Quick start practical example -
Basic doc link - https://yajrabox.com/docs/laravel-datatables/10.0/quick-starter
¶Create UsersDataTable
Inside app\DataTables
folder, create a file called UserDataTable.php
and add these codes -
<?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\Services\DataTable;
class UserDataTable extends DataTable
{
public function dataTable(QueryBuilder $query): EloquentDataTable
{
return (new EloquentDataTable($query))->addIndexColumn()
->addColumn('action', function ($row) {
$html = '<a class="btn-link text-info" href="' . route('users.edit', $row->id) . '"><i class="fa fa-pencil"></i></a>';
return $html;
})
->editColumn('created_at', function ($row) {
return $row->updated_at->format('Y-m-d');
})
->editColumn('updated_at', function ($row) {
return $row->updated_at->diffForHumans();
});
}
public function query(User $model): QueryBuilder
{
return $model->newQuery();
}
public function html(): HtmlBuilder
{
return $this->builder()
->setTableId('user-table')
->columns($this->getColumns())
->minifiedAjax()
->orderBy(1)
->selectStyleSingle()
->buttons([
// Button::make('add'),
]);
}
public function getColumns(): array
{
return [
Column::make('DT_RowIndex')->title('S/No')->orderable(false)->searchable(false),
Column::make('name')->title('User Name'),
Column::make('created_at')->title('Created'),
Column::make('updated_at')->title('Last updated'),
Column::computed('action')
->title('Action')
->exportable(false)
->printable(false)
->width(60)
->addClass('text-center')
];
}
protected function filename(): string
{
return 'User-' . date('YmdHis');
}
}
¶Link this DataTable from the Controller -
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index(UserDataTable $dataTable)
{
return $dataTable->render('users.index');
}
¶Blade file to call this DataTable -
@extends('layouts.master')
@section('title')
User List
@endsection
@section('admin-content')
<div class="card card-body">
{{ $dataTable->table() }}
</div>
@endsection
@section('scripts')
{{ $dataTable->scripts(attributes: ['type' => 'module']) }}
@endsection
¶Master Layout file if needs -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>@yield('title', 'Admin Panel') | {{ config('app.name') }}</title>
{{-- Datatable CSS --}}
<link href="{{ asset('vendors/data-table/datatables.min.css') }}" rel="stylesheet">
<link href="{{ asset('vendors/data-table/dataTables.bootstrap4.min.css') }}" rel="stylesheet">
{{-- Custom styles --}}
@yield('styles')
</head>
<body id="page-top">
<!-- Page Wrapper -->
<div id="wrapper">
<!-- Sidebar -->
@include('backend.partials.sidebar')
<!-- End of Sidebar -->
<!-- Content Wrapper -->
<div id="content-wrapper" class="d-flex flex-column">
<!-- Main Content -->
<div id="content">
<!-- Topbar -->
@include('backend.partials.navbar')
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<!-- Page Heading -->
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">
@yield('title')
</h1>
@yield('page-right-side')
</div>
@yield('admin-content')
</div>
<!-- /.container-fluid -->
</div>
<!-- End of Main Content -->
<!-- Footer -->
@include('backend.partials.footer')
<!-- End of Footer -->
</div>
<!-- End of Content Wrapper -->
</div>
<!-- End of Page Wrapper -->
{{-- Data table --}}
<script src="{{ asset('vendors/jquery/jquery-3.6.0.min.js') }}"></script>
<script src="{{ asset('vendors/data-table/datatables.min.js') }}"></script>
<script src="{{ asset('vendors/data-table/dataTables.bootstrap4.min.js') }}"></script>
<!-- Page level custom scripts -->
@yield('scripts')
</body>
</html>
Hope, this will help you to generate a full datatable in Yajra DataTable 10.x.
** Tags: ** DataTable, laravel datatable, yajra datatable, laravel yajra, datatable 10.x, new datatable setup laravel, laravel datatable full setup
PHP If-else-elseif and Switch-case
PHP String Functions - All necessary String functions in PHP to manage strings better.
Popular Tutorials
Popular Tutorials
Categories
-
Artificial Intelligence (AI)
11
-
Bash Scripting
1
-
Bootstrap CSS
0
-
C Programming
14
-
C#
0
-
ChatGPT
1
-
Code Editor
2
-
Computer Engineering
3
-
CSS
28
-
Data Structure and Algorithm
18
-
Design Pattern in PHP
2
-
Design Patterns - Clean Code
1
-
E-Book
1
-
Git Commands
1
-
HTML
19
-
Interview Prepration
2
-
Java Programming
0
-
JavaScript
12
-
Laravel PHP Framework
37
-
Mysql
1
-
Node JS
1
-
Online Business
0
-
PHP
28
-
Programming
8
-
Python
12
-
React Js
19
-
React Native
1
-
Redux
2
-
Rust Programming
15
-
SEO - Search Engine Optimization
1
-
Tailwind CSS
1
-
Typescript
10
-
Uncategorized
0
-
Vue JS
1
-
Windows Operating system
1
-
Woocommerce
1
-
WordPress Development
2
Tags
- Artificial Intelligence (AI)
- Bash Scripting
- Business
- C
- C Programming
- C-sharp programming
- C++
- Code Editor
- Computer Engineering
- CSS
- Data Structure and Algorithm
- Database
- Design pattern
- Express JS
- git
- Git Commands
- github
- HTML
- Java
- JavaScript
- Laravel
- Mathematics
- MongoDB
- Mysql
- Node JS
- PHP
- Programming
- Python
- React Js
- Redux
- Rust Programming Language
- SEO
- TypeScript
- Vue JS
- Windows terminal
- Woocommerce
- WordPress
- WordPress Plugin Development