Laravel Datatables Server Side Search and Pagination Example

Laravel 6 , Laravel , Laravel 7

Nicesnippets

6097

01-07-2020


Laravel Datatables Server Side Search and Pagination Example

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


Recommended Posts