Step 1: Install Laravel Project
I am going to install a laravel project using composer.
composer create-project --prefer-dist laravel/laravel laravel7datatables
Step 2: Going inside of project using the command
cd laravel7datatables
Step 3: Setup MySQL database
Now, configure this database in the .env file.
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel7datatables
DB_USERNAME=root
[email protected]
I have done local database credentials.
Now migrate database
php artisan migrate
Step 4: Install yajra Package
We going to install the yajra/laravel-datatables-oracle package by writing the following command in cmd.
composer require yajra/laravel-datatables-oracle
Step 5: Now add providers and aliases inside of config/app.php
'providers' => [
// …
Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
// …
'Datatables' => Yajra\DataTables\Facades\DataTables::class,
]
Step 6: Generating dummy data
You can generate dummy data
php artisan tinker
factory(App\User::class, 50)->create();
Step 7: Create a controller and route
php artisan make:controller UsersDataController --resource
I going to register route in routes/web.php file.
//web.php
Route::get('show', 'UsersDataControl[email protected]');
Route::get('index', '[email protected]');
Step 8: Check controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Datatables;
use App\User;
class UsersDataController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
return Datatables::of(User::query())->make(true);
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
return view('displaydata');
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request, $id)
{
//
}
/**
* Remove the specified resource from storage.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function destroy($id)
{
//
}
}
Step 9: Create a view file.
<html lang="en">
<head>
<title>Laravel 7 DataTables Example: Real Programmer</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="container">
<h2>Laravel 7 DataTables Example: Real Programmer</h2>
<table class="table table-bordered" id="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
</table>
</div>
<script>
$(function() {
$('#table').DataTable({
processing: true,
serverSide: true,
ajax: '{{ url('index') }}',
columns: [
{ data: 'id', name: 'id' },
{ data: 'name', name: 'name' },
{ data: 'email', name: 'email' }
]
});
});
</script>
</body>
</html>
Next run below command for a quick run:
php artisan serve
Open URL in your browser: http://localhost:8000/show