Laravel 9 Custom server side search with datatable
In this post we will give you Laravel 9 Custom server side search with datatable, hear for Laravel Custom server side search with datatable we will give you details about it.
datatable already provides the searching functionality. so, why we need it? yes, i agree with you but there you can search on only visible values searching. like in your debatable you show only “name” and “email” then you only able to search on those two fields values.
But if you want to search any values from your database’s table then you need to use this functionality in your laravel 9 application. here i will share with you a very basic example for how to add custom server-side search functionality with your datatable listing in laravel 9 application.
Step – 1 : Route
In the first step, we need to write the following route in the route’s file.
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UserController;
// Resource Route for users.
Route::resource('users', UserController::class);
// Route for get users for yajra post request.
Route::get('get-users', [UserController::class, 'getUsers'])->name('get-users');
Step – 2 : UserController
now, in this step, we write the following code in “getUsers()” function.
public function getUsers(Request $request, User $ser)
{
$input = \Arr::except($request->all(),array('_token', '_method'));
$data = User::where('is_active', '1');
if(isset($input['username'])) {
$data = $data->where('username', 'like', '%'.$input['username'].'%');
}
if(isset($input['country'])) {
$data = $data->where('country', $input['country']);
}
$data = $data->get();
return \DataTables::of($data)
->addColumn('Actions', function($data) {
return '<button type="button" data-id="'.$data->id.'" data-toggle="modal" data-target="#DeleteUserModal" class="btn btn-danger btn-sm" id="getDeleteId">Delete</button>';
})
->rawColumns(['Actions'])
->make(true);
}
Step – 3 : Change in Blade File
into the last step we need to change in our blade file. write the following or implement there the following code.
@extends('articles.layout')
@section('style')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css">
@endsection
@section('content')
<h3>Laravel Custom server side search with datatable</h3>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="card-title">
Advance Searching
</div>
<form method="GET" id="search-form">
<div class="row">
<div class="col-lg-3">
<input type="text" class="form-control adv-search-input" placeholder="User Name" name="username" value="{{ (isset($_GET['username']) && $_GET['username'] != '')?$_GET['username']:'' }}">
</div>
<div class="col-lg-3">
<input type="text" class="form-control adv-search-input" placeholder="Country" name="country" value="{{ (isset($_GET['country']) && $_GET['country'] != '')?$_GET['country']:'' }}">
</div>
<div class="col-lg-12">
<hr>
<button class="btn btn-success" type="submit" id="extraSearch">Search</button>
<a class="btn btn-danger" href="#">Reset</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-md-12">
<div class="card">
<div class="card-body">
<div class="card-title">
{{ __('Article Listing') }}
<button style="float: right; font-weight: 900;" class="btn btn-info btn-sm" type="button" data-toggle="modal" data-target="#CreateArticleModal">
Create Article
</button>
</div>
<div class="table-responsive">
<table class="table table-bordered datatable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Description</th>
<th width="150" class="text-center">Action</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@endsection
@section('script')
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// init datatable.
var dataTable = $('.datatable').DataTable({
processing: true,
serverSide: true,
autoWidth: false,
pageLength: 5,
// scrollX: true,
"order": [[ 0, "desc" ]],
ajax: {
url: '{{ route('get-users') }}',
data: function (d) {
d.username = $('input[name=username]').val();
d.country = $('input[name=country]').val();
}
},
columns: [
{data: 'id', name: 'id'},
{data: 'name', name: 'name'},
{data: 'email', name: 'email'},
{data: 'Actions', name: 'Actions',orderable:false,serachable:false,sClass:'text-center'},
]
});
});
</script>
@endsection
Hope this code and post will helped you for implement Laravel 9 Custom server side search with datatable. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve onlincode. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs onlincode.org