article

Wednesday, April 20, 2022

Laravel 9 Datatables Server Side Data Processing

Laravel 9 Datatables Server Side Data Processing

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

How to install laravel 9

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

jQuery DataTables API for Laravel
https://github.com/yajra/laravel-datatables

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

https://datatables.net/

Connecting our Database

open .env file root directory. 

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

Creating Controller

php artisan make:controller ProductController
C:\xampp\htdocs\laravel9\blog>php artisan make:controller ProductController
change it with the following codes:

blog\app\Http\Controllers\ProductController.php
//blog\app\Http\Controllers\ProductController.php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Product; //add Product Model

class ProductController extends Controller
{
    public function getData(Request $request){
        if ($request->ajax()) {
             //$datas = Product::all();
             return datatables()->of(Product::all())->toJson();
         }        
         return view('products');
     }
}
Creating Model
php artisan make:model Product -m
C:\xampp\htdocs\laravel9\blog>php artisan make:model Product -m

This will create our model located : blog\app\Models\Product.php

we put -m when we create our model.
this will automatically make the migration for our model and you will see that in yourproject/database/migrations
blog\database\migrations\create_products_table.php
edit code blog\database\migrations\create_products_table.php
//blog\database\migrations\create_products_table.php
<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

return new class extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('products', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->string('price');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('products');
    }
};
Database Migration

php artisan migrate

C:\xampp\htdocs\laravel9\blog>php artisan migrate
Migration table created
Creating Routes
blog\routes\web.php
//blog\routes\web.php
<?php
use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});
    
Route::get('table', 'ProductController@getData')->name('table');
Creating Views
blog\resources\views\products.blade.php
//blog\resources\views\products.blade.php
<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Datatables Server Side Data Processing - Cairocoders</title>
    <meta name="csrf-token" content="{{ csrf_token() }}"> 
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
    <link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
    <h2>Laravel 9 Datatables Server Side Data Processing</h2>
    <table class="table table-bordered table-striped" id="data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Price</th>               
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
<script type="text/javascript">
  $(function () {
    
    var table = $('#data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "table",
        columns: [
            {data: 'id', name: 'id'},
            {data: 'name', name: 'name'},
            {data: 'price', name: 'price'},         
        ]
    });
    
  });
</script>
</body>
</html>
Edit RouteServiceProvider.php
blog\app\Providers\RouteServiceProvider.php
uncomment protected $namespace = 'App\\Http\\Controllers';

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

Related Post