Hello Devs,
In this tutorial we will discover about datatable searching and sorting on datetime carbon objects in laravel.
Given below is the full example for datatables and sortable datetime/carbon objects in laravel app.
Step 1 :
Install Laravel App
composer create-project --prefer-dist laravel/laravel blog
Step 2 :
Setup Database Configuration
open ".env" file and change the database
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
routes/web.php
Route::get('date-time', 'HomeController@getDateTime')->name('date.time.index');
Step 4 :
Create Controller
create controller as HomeController.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Yajra\DataTables\DataTables;
use App\User;
class HomeController extends Controller
{
public function getDateTime(Request $request)
{
if ($request->ajax()) {
$data = User::select(['id','name','email','created_at']);
return Datatables::of($data)
->addIndexColumn()
->editColumn('created_at', function ($row) {
return [
'display' => e($row->created_at->format('d/m/Y')),
'timestamp' => $row->created_at->timestamp
];
})
->filterColumn('created_at', function ($query, $keyword) {
$query->whereRaw("DATE_FORMAT(created_at,'%d/%m/%Y') LIKE ?", ["%$keyword%"]);
})
->make(true);
}
return view('date-time');
}
}
Step 5 :
Create Blade File
/resources/views/date-time.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel datatables sort by date tutorial - rathorji.in</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 Sort by Date Tutorial - rathorji.in</h5></div>
<div class="card-body">
<table class="table table-bordered data-table">
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Email</th>
<th>Created Date</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('date.time.index') }}",
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{
data: 'created_at',
type: 'num',
render: {
_: 'display',
sort: 'timestamp'
}
},
]
});
});
</script>
</html>
Run this quick run command:
php artisan serve
Open this URL on browser:
http://localhost:8000/date-time
I hope this example helps you