How to add custom filter/Search using Laravel Datatables,laravel datatables 5.8,laravel datatables ajax,laravel datatables crud, laravel datatables edit column, laravel datatables pagination, laravel datatables example, laravel datatables add column, laravel datatables add column search, laravel datatables array, laravel datatables api, laravel datatables bootstrap 4, laravel datatables bootstrap, laravel datatables builder, laravel datatables blade, laravel datatable button action, laravel datatables command, laravel datatables checkbox, laravel datatables column, laravel datatables custom column, laravel datatables config, laravel datatables csrf, laravel datatables default sort, laravel datatables documentation, laravel 5.4 datatables tutorial, laravel use datatables, laravel-datatables view, laravel datatables with pagination, laravel datatables with ajax, laravel datatables without ajax, laravel datatables warning, laravel datatables yajrabox, yajra datatables laravel 5.7, yajra datatables laravel 5.5, yajra datatables laravel 5.4, yajra datatables laravel 5.8, yajra datatables laravel example, yajra datatables laravel github, yajra datatables laravel tutorial, yajra datatables laravel 5.1, datatables y laravel, yajra/laravel-datatables ^1.0, laravel datatables 404, datatables laravel 4, laravel 4.2 datatable, laravel datatables 5.8, laravel datatables 5.7, laravel datatables 5.5, laravel datatables 5.6, laravel datatables 5.4, laravel datatables 5.2, laravel 5.4 datatables ajax, laravel 5 datatables, laravel 5 datatables editor, yajra/laravel-datatables-oracle 6.0, laravel-datatables 7, yajra/laravel-datatables-oracle 8, laravel datatables 8

How to add custom filter/Search using Laravel Datatables

In this Laravel tutorial, we will discuss today how to add custom filter/Search with Laravel Datatable. The package we are going to use for Datatable is yajra/laravel-datatables-oracle.

During this tutorial, we will use laravel 5.8, but you can start from Laravel 5.1 or above version. When you show the millions of records on a page from the database in a form of table you need to add pagination and some filters to find the specific record.

The yajra/laravel-datatables-oracle package gives the functionalities like sort, search, pagination on a table. So just follow the following steps to add the custom filter and search in laravel application:

Setup New Laravel Project

Via Laravel Installer


composer global require laravel/installer

laravel new projectName

Via composer


composer create-project --prefer-dist laravel/laravel projectName

Setup MySQL database for your project

In second setup create a new database through your phpmyadmin dashboard and add this database to your .env file.


//.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE= your database name
DB_USERNAME= your database username
DB_PASSWORD= your database password

Now you need to migrate two default table users and password_resets through the command:-


php artisan migrate

this command will create both ( users and password_resets ) table in your database.

Install yajra/laravel-datatables-oracle Package

Now laravel datatable process has been starting here. First you need to install yajra/laravel-datatables-oracle Package in your project through the command:-


composer require yajra/laravel-datatables-oracle

Add Package To Providers and Aliases config->app.php File


'providers' => [
        // ...
        Yajra\Datatables\DatatablesServiceProvider::class,
    ]

'aliases' => [
        // ...
        'Datatables' => Yajra\Datatables\Facades\Datatables::class,
    ]    

Create Dummy Data

To show laravel datatable we need to create some dummy data through the command:-


php artisan tinker

factory(App\User::class, 100)->create();

Through above command 100 dummy users data will be added to users table in your database.

laravel tinker

Create Controller

Create a new controller for laravel datatables called DataTableController


php artisan make:controller DataTableController

Create A Route

Create a new route in route/web.php


Route::get('createdatatable', 'DataTableController@createdatatable');
Route::get('index', 'DataTableController@index');

Now update controller like below


use Datatables;
use App\User;

class EmploymentAgreement extends Controller
{
    public function index()
    {
        return Datatables::of(User::query())->make(true);
    }

    public function createdatatable()
    {
        return view('showdatatable');
    }

}

Create View show datatable


<html lang="en">
<head>
    <title>Laravel DataTables View</title>

<link  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
         <link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/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 DataTables Tutorial Example</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>

Now run code by command:


php artisan serve

The output will look like below screenshot:-

laravel datatable

See also:- How to generate a pdf file in laravel and How to integrate adobe echo sign API in Laravel

Post Created 36

Leave a Reply

Related Posts

Begin typing your search above and press enter to search. Press ESC to cancel.

Back To Top