Laravel 6 Datatables Custom filter example tutorial – onlinecode

Laravel 6 Datatables Custom filter example tutorial – onlinecode

In this post we will give you information about Laravel 6 Datatables Custom filter example tutorial – onlinecode. Hear we will give you detail about Laravel 6 Datatables Custom filter example tutorial – onlinecodeAnd how to use it also give you demo for it if it is necessary.

Today, We will discuss about how to use and custom datatables in laravel 6. We can easily searching, pagination, and ordering the data using yajra datatable.The yajra data table is an oracle package and it provides facilities like sorting, searching, pagination and ordering. it is given quick response data because it’s used ajax and it’s layout very nice therefore users often use.Now, We will create the yajra data table using the below step in laravel 6.

Overview

Step 1: Install laravelStep 2: Setting Database ConfigurationStep 3: The Database MigrationStep 4: Create Dummy Record DataStep 5: Install yajra PackageStep 6: Add providers and aliasesStep 7: Create ControllerStep 8: Create RouteStep 9: Create a view fileStep 1: Install laravel

Install the laravel using the below command.

PHP
composer create-project --prefer-dist laravel/laravel laravel6_datatable

Step 2: Setting Database Configuration

After the complete installation of laravel. we have to database configuration. now we will open the .env file and change the database name, username, password in the .env file. See below changes in a .env file.

PHP
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave6_datatable)
DB_USERNAME=Enter_Your_Database_Username(root)
DB_PASSWORD=Enter_Your_Database_Password(root)

Step 3: The Database Migration

Create The table using the below command.

PHP
php artisan migrate

Step 4: Create Dummy Record Data

Now we will add a dummy record in the ‘users’ table using the laravel tinker command.

PHP
php artisan tinker

factory(AppUser::class, 100)->create();

Step 5: Install yajra Package

Now, We will install yajra package using below command.

PHP
composer require yajra/laravel-datatables-oracle

Step 6: Add providers and aliases

We will add below providers and aliases in the “config/app.php” file.

PHP
'providers' => [

	....

	YajraDatatablesDatatablesServiceProvider::class,

],

'aliases' => [

	....

	'Datatables' => 'YajraDatatablesFacadesDatatables',

]

Step 7: Create Controller

Now, We will create the controller using the below command and paste below code in this controller.

PHP
php artisan make:controller DataTableController --resource

<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;
use Datatables;
use AppUser;

class DataTableController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return IlluminateHttpResponse
     */
    public function index()
    {
        return view('datatable.list');
    }


    public function fetch()
    {
        //return Datatables::of(User::query())->make(true);
        
        $start_date = (!empty($_GET["start_date"])) ? ($_GET["start_date"]) : ('');
        $end_date = (!empty($_GET["end_date"])) ? ($_GET["end_date"]) : ('');
        if($start_date && $end_date){
         $start_date = date('Y-m-d', strtotime($start_date));
         $end_date = date('Y-m-d', strtotime($end_date));
        
         User::query()->whereRaw("date(users.created_at) >= '" . $start_date . "' AND date(users.created_at) <= '" . $end_date . "'");
        }
        $query = User::query()->select('*');
        return datatables()->of($query)->make(true);
    }

    /**
     * Show the form for creating a new resource.
     *
     * @return IlluminateHttpResponse
     */
    public function create()
    {
        //
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @return IlluminateHttpResponse
     */
    public function store(Request $request)
    {
        //
    }

    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function show($id)
    {
        //
    }

    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function edit($id)
    {
        //
    }

    /**
     * Update the specified resource in storage.
     *
     * @param  IlluminateHttpRequest  $request
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function update(Request $request, $id)
    {
        //
    }

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return IlluminateHttpResponse
     */
    public function destroy($id)
    {
        //
    }
}

Step 8: Create Route

Add the below following route code in the “routes/web.php” file.

PHP
<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});



Route::get('datatable', 'DataTableController@index');
Route::get('fetch', 'DataTableController@fetch');
?>

Step 9: Create a view file.

Finally, We will create list.blade.php file in the “resources/views/datatable/” folder directory and paste below code.

PHP
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Laravel Datatable using Yajra Tutorial Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
    <link  href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <script>
        $(function() {
              $.ajaxSetup({
              headers: {
                 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
              }
             });
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ url('fetch') }}',
                data: function (d) {
                 d.start_date = $('#start_date').val();
                 d.end_date = $('#end_date').val();
                },
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                ]
            });
           $('#btnFiterSubmitSearch').click(function(){
             $('#laravel_datatable').DataTable().draw(true);
           });
        });
    </script>
</head>
<body>
 <div >
    <h2>Laravel 6 Datatables Custom Filter Example Tutorial - onlinecode</h2>
    <div >
      <label for="start_date">Start Date:</label>
      <input type="date" name="start_date" id="start_date"  placeholder="Please select start date"> 
    </div>
    <div >
      <label for="end_date">End Date:</label>
      <input type="date" name="end_date" id="end_date"  placeholder="Please select end date"> 
    </div>
    <div >
    	<button type="button" id="btnFiterSubmitSearch" >Submit</button>
    </div>
    
    <table  id="dataTable">
        <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Email</th>
            <th>Created</th>
        </tr>
        </thead>
    </table>
</div>
</body>
</html>

Now, We can run this example using below command.

PHP
php artisan serve

Recommended PostsLaravel 6 Ajax Image Upload example tutorialLaravel 6 Pagination Example TutorialLaravel 6 pdf generator tutorial using dompdf

Please follow and like us:

Hope this code and post will helped you for implement Laravel 6 Datatables Custom filter example tutorial – onlinecode. 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 us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs

For More Info See :: laravel And github

Leave a Comment

Your email address will not be published. Required fields are marked *

  +  60  =  63

We're accepting well-written guest posts and this is a great opportunity to collaborate : Contact US