Home » Implement Yajra Datatables in Laravel 7 Application

Implement Yajra Datatables in Laravel 7 Application

Today, We want to share with you Implement Yajra Datatables in Laravel 7 Application.In this post we will show you How to Implement Yajra DataTables in Laravel 6, hear for How to Install Yajra DataTables With Laravel 7 Application we will give you demo and example for implement.In this post, we will learn about Laravel 7 Crud Application using Yajra Datatables and Ajax with an example.

Implement Yajra Datatables in Laravel 7 Application

There are the Following The simple About How To Install Yajra DataTables In Laravel App Full Information With Example and source code.

As I will cover this Post with live Working example to develop Creating a Laravel Full CRUD with DataTables Editor, so the how to use yajradatatables in laravel is used for this example is following below.

Read Also:  laravel flash message Notification in Blade template

Phase 1: Install Laravel 7

laravel 7 application setup

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

Phase 2 : Install Yajra Datatable

install yajra datatable composer package

step by step Installation – Laravel DataTables YajraBox

composer require yajra/laravel-datatables-oracle

config/app.php

.....
'providers' => [
	....
	Yajra\DataTables\DataTablesServiceProvider::class,
]
'aliases' => [
	....
	'DataTables' => Yajra\DataTables\Facades\DataTables::class,
]
.....

Phase 3: Add Dummy Records

dummy members using tinker factory

php artisan tinker

factory(App\Member::class, 200)->create();

Phase 4: Add Route

routes/web.php

Route::get('members', ['uses'=>'[email protected]', 'as'=>'members.index']);

Phase 5: Make Controller

app/Http/Controllers/MemberController.php

<?php
     
namespace App\Http\Controllers;
     
use App\Member;
use Illuminate\Http\Request;
use DataTables;
     
class MemberController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index(Request $request)
    {
        if ($request->ajax()) {
            $data = Member::latest()->get();
            return Datatables::of($data)
                    ->addIndexColumn()
                    ->addColumn('action', function($row){
   
                           $btn = '<a href="javascript:void(0)" class="edit btn btn-primary btn-sm">View</a>';
     
                            return $btn;
                    })
                    ->rawColumns(['action'])
                    ->make(true);
        }
      
        return view('members');
    }
}

Phase 6: Make View

resources/views/members.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 7 Datatables Tutorial - Pakainfo.com</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <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">
    <h1>Laravel 7 Datatables Tutorial <br/> pakainfo.com</h1>
    <table class="table table-bordered data-table">
        <thead>
            <tr>
                <th>No</th>
                <th>Name</th>
                <th>Email</th>
                <th width="100px">Action</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
</div>
   
</body>
   
<script type="text/javascript">
  $(function () {
    
    var table = $('.data-table').DataTable({
        processing: true,
        serverSide: true,
        ajax: "{{ route('members.index') }}",
        columns: [
            {data: 'DT_RowIndex', name: 'DT_RowIndex'},
            {data: 'name', name: 'name'},
            {data: 'email', name: 'email'},
            {data: 'action', name: 'action', orderable: false, searchable: false},
        ]
    });
    
  });
</script>
</html>

Web Programming Tutorials Example with Demo

Read :

Read Also:  Laravel 7 jQuery Ajax Form Validation Example

Summary

You can also read about AngularJS, ASP.NET, VueJs, PHP.

I hope you get an idea about Laravel 7.x, 6 DataTables Example Tutorial.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.


Related FAQ

Here are some more FAQ related to this Article:

  1. Read Also:  Nested Child Routes in Vuejs Navigate Menu
  2. Read Also:  Laravel 7 Implement Flash Messages with example
  3. Read Also:  REST API Insert Update Delete using PHP
  4. Read Also:  How to use Datatables in Laravel 5.8
  5. Read Also:  Laravel Datatable Pagination Sorting and Search server side processing
  6. Read Also:  Full form of Domain Name Extensions
  7. Read Also:  Custom Global Helpers in Laravel 5.8
  8. Read Also:  Find duplicate data index in php Examples
  9. Read Also:  Laravel 6 Eloquent Join Multiple Tables
  10. Read Also:  PHP Laravel 7 Send Email Example Tutorial

Leave a Comment

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