article

Sunday, July 10, 2022

Laravel Datatables Yajra Server Side

Laravel Datatables Yajra Server Side

How to install laravel 9

https://tutorial101.blogspot.com/2022/02/how-to-install-laravel-9.html

Connecting our Database

open .env file root directory.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laraveldb
DB_USERNAME=root
DB_PASSWORD=

Create tables 

php artisan make:migration create_customers_table
C:\xampp\htdocs\laravel\laravelproject>php artisan make:migration create_customers_table


Open new migrations
yourproject/database/migrations
laravelproject\database\migrations\create_customers_table.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//laravelproject\database\migrations\create_customers_table.php
return new class extends Migration
{
    public function up()
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->id();
            $table->string('CustomerName');
            $table->string('Address');
            $table->string('City');
            $table->string('PostalCode');
            $table->string('Country');
            $table->timestamps();
        });
    }
};
Database Migration
php artisan migrate

C:\xampp\htdocs\laravel\laravelproject>php artisan migrate
Migration table created successfully.
check database table

Create tables Model

php artisan make:model Customers

Creating Controller

php artisan make:controller CustomersController
C:\xampp\htdocs\laravel\laravelproject>php artisan make:controller CustomersController
change it with the following codes:
laravelproject\app\Http\Controllers\CustomersController.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
//laravelproject\app\Http\Controllers\CustomersController.php
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Customers; //add Customers Model
use DataTables;
 
class CustomersController extends Controller
{
    function index()
    {
        return view('index');
    }
 
    function getdata()
    {
     $customer = Customers::select('id', 'CustomerName', 'Address', 'City', 'PostalCode', 'Country');
     return Datatables::of($customer)
            ->addColumn('action', function($customer){
                return '<a href="#" class="btn btn-xs btn-primary edit" id="'.$customer->id.'"><i class="bi bi-pencil-square"></i> Edit</a> <a href="#" class="btn btn-xs btn-danger delete" id="'.$customer->id.'"><i class="bi bi-backspace-reverse-fill"></i> Delete</a>';
            })
            ->addColumn('checkbox', '<input type="checkbox" name="customer_checkbox[]" class="customer_checkbox" value="{{$id}}" />')
            ->rawColumns(['checkbox','action'])
            ->make(true);
    }
}
Route
laravelproject\routes\web.php
?
1
2
3
4
5
6
7
8
9
10
11
12
//laravelproject\routes\web.php
<?php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CustomersController; //add CustomersController
 
//Route::get('/', function () {
//    return view('welcome');
//});
   
Route::get('/', [CustomersController::class, 'index']);
Route::get('ajaxdata', [CustomersController::class, 'getdata'])->name('getdata');
Create Views
laravelproject\resources\views\index.blade.php

Bootstrap 5
https://getbootstrap.com/docs/5.0/getting-started/introduction/
https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css

Jquery
https://jquery.com/download/
CDN : jsDelivr CDN
https://www.jsdelivr.com/package/npm/jquery
https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js

https://icons.getbootstrap.com/#install

https://datatables.net/
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
//laravelproject\resources\views\index.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel Datatables Yajra Server Side</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
 
    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" />
    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.3/font/bootstrap-icons.css">
</head>
<body>
<div class="container">
    <br />
    <h3 align="center">Laravel Datatables Yajra Server Side</h3>
    <br />
    <div align="right">
        <button type="button" name="add" id="add_data" class="btn btn-success"> <i class="bi bi-plus-square"></i> Add</button>
    </div>
    <br />
    <table id="customer_table" class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>Name</th>
                <th>Address</th>
                <th>City</th>
                <th>Postal Code</th>
                <th>Country</th>
                <th>Action</th>
                <th>
                    <button type="button" name="bulk_delete" id="bulk_delete" class="btn btn-danger btn-xs"><i class="bi bi-backspace-reverse-fill"></i></button>
                </th>
            </tr>
        </thead>
    </table>
</div>
 
<script type="text/javascript">
$(document).ready(function() {
     $('#customer_table').DataTable({
        "processing": true,
        "serverSide": true,
        "ajax": "{{ route('getdata') }}",
        "columns":[
            { "data": "CustomerName" },
            { "data": "Address" },
            { "data": "City" },
            { "data": "PostalCode" },
            { "data": "Country" },
            { "data": "action", orderable:false, searchable: false},
            { "data":"checkbox", orderable:false, searchable:false}
        ]
     });
});
</script>
</body>
</html>
Datatables Yajra
https://yajrabox.com/docs/laravel-datatables/master/installation

composer require yajra/laravel-datatables-oracle:"~9.0"
C:\xampp\htdocs\laravel\laravelproject>composer require yajra/laravel-datatables-oracle:"~9.0"

Run C:\xampp\htdocs\laravel\laravelproject>php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Posted by ednalan at 12:35 AM . Under .

Related Post