10-Apr-2023
.
Admin
Hello Friends,
Today, I am going show you datatable server side example in laravel.We will implement datatable server side in laravel appliation.There are many ways to get your data into DataTables, and if you are working with seriously large databases, you might want to consider using the server-side options that DataTables provides.
Server-side processing is enabled by setting the serverSide option to true and providing an Ajax data source through the ajax option.
Here I will give you full example for datatable server side example in laravel, So Let's follow the bellow step by step.
Step 1 : Install Laravel App
In this step, You can install laravel fresh app. So open terminal and put the bellow command.
composer create-project --prefer-dist laravel/laravel blog
Step 2 : Setup Database Configuration
After successfully install laravel app thenafter configure databse setup. We will open ".env" file and change the database name, username and password in the env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name
DB_USERNAME=Enter_Your_Database_Username
DB_PASSWORD=Enter_Your_Database_Password
Step 3 : Create Route
now, we need to add for HomeController in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::get('server-side', 'HomeController@getServerSide')->name('server.side.index');
Step 4 : Create Controler
Here this step now we should create new controller as HomeController. So run bellow command and create new controller.
php artisan make:controller HomeController
successfully run above command then,you can create method for get courses and fetch record users table. So Let's copy bellow and put in the controller file.
app/http/controller/HomeController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use Yajra\DataTables\DataTables;
class HomeController extends Controller
{
public function getServerSide(Request $request)
{
if ($request->ajax()) {
$users = User::select('*');
return Datatables::of($users)->make(true);
}
return view('serverSide');
}
}
Step 5 : Create Blade File
In last step. In this step we have to create blade file. So mainly we have to create server side datatable view file for show serverside. So finally you have to create following file and put bellow code:
/resources/views/serverSide.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel datatables server side example</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
<div class="container" style="margin-top: 100px;margin-bottom: 100px; ">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header bg-info text-white"><h5>Laravel Datatables Server Side Example - NiceSnippets.com</h5></div>
<div class="card-body">
<table class="data-table mdl-data-table dataTable" cellspacing="0" width="100%" role="grid" style="width: 100%;">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.data-table').DataTable({
processing: true,
serverSide: true,
ajax: "{{ route('server.side.index') }}",
columns: [
{ "data": "id" },
{ "data": "name" },
{ "data": "email" },
{ "data": "gender" },
],
});
});
</script>
</body>
</html>
Now we are ready to run our example so run bellow command for quick run:
php artisan serve
Now you can open bellow URL on your browser:
http://localhost:8000/server-side
It will help you...
#Laravel 7
#Laravel
#Laravel 6
