10-Apr-2023
.
Admin
Hi Guys,
In this blog, I will show you datatable searching and sorting on datetime carbon objects in laravel. We will sortable and serching on created at datetime and carbon objects in laravel app. I am going to learn you datetime/carbon objects on searching and sorting using datatable in laravel application.
There is an example of using DateTime/Carbon object however this example shows date and time in Y/m/d format.In our case, our data field can have one value for display such as 06/25/2020 and another value 1483142400 that would be used for ordering.
Here I will give full example for datatables and sortable datetime/carbon objects in laravel app. So Let's Follow 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 route in HomeController in laravel application. so open your "routes/web.php" file and add following route.
routes/web.php
Route::get('date-time', 'HomeController@getDateTime')->name('date.time.index');
Step 4 : Create Controler
Here this step now we have to create controller as HomeController.you can create method for get users 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 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
In last step. In this step we have to create blade file. So mainly we have to create date-time view file for show datatbale data. So finally you have to create following file and put bellow code:
/resources/views/date-time.blade.php
<!DOCTYPE html>
<html>
<head>
<title>laravel datatables sort by date tutorial - nicesnippets.com</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 - NiceSnippets.com</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>
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/date-time
It will help you...
#Laravel 7
#Laravel
#Laravel 6
