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 <?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