Skip to content
  • About Us
  • Contact Us
  • Privacy Policy
  • Terms & Conditions
  • Site Map

XpertPhp

Expertphp Is The Best Tutorial For Beginners

  • Home
  • Javascript
    • Jquery
    • React JS
    • Angularjs
    • Angular
    • Nodejs
  • Codeigniter
  • Laravel
  • Contact Us
  • About Us
  • Live Demos

Home » Laravel » How to use yajra datatable in laravel 5.8

How to use yajra datatable in laravel 5.8

How to use yajra datatable in laravel 5.8

Posted on May 14, 2019January 25, 2021 By XpertPhp 4 Comments on How to use yajra datatable in laravel 5.8

Today, We will discuss about how to use yajra datatable in laravel 5.8. We can easily searching, pagination, and ordering the data using this detestable.

yajra datatable is an oracle package and it provides facility like as sorting, searching, pagination and ordering. it is given a quick response data because it’s used ajax and it’s layout very nice therefore user often use.

Now, We will create yajra datatable using below step in laravel 5.8.

Step 1: Install laravel

Install the laravel using the below command.

PHP
1
composer create-project --prefer-dist laravel/laravel laravel58_datatable 5.8

Step 2: Now, configure this database in the .env file.

After 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
1
2
3
4
5
6
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=Enter_Your_Database_Name(larave58_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
1
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
1
2
3
php artisan tinker
 
factory(App\User::class, 100)->create();

Step 5: Install yajra Package

Now, We will install yajra package using below command.

PHP
1
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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
'providers' => [
 
....
 
Yajra\Datatables\DatatablesServiceProvider::class,
 
],
 
'aliases' => [
 
....
 
'Datatables' => 'Yajra\Datatables\Facades\Datatables',
 
]

Step 7: Create Controller

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
php artisan make:controller DataTableController --resource
 
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use Datatables;
use App\User;
 
class DataTableController extends Controller
{
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function index()
    {
        return view('datatable.list');
    }
 
 
    public function fetch()
    {
        return Datatables::of(User::query())->make(true);
    }
 
    /**
     * Show the form for creating a new resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function create()
    {
        //
    }
 
    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //
    }
 
    /**
     * Display the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function show($id)
    {
        //
    }
 
    /**
     * Show the form for editing the specified resource.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function edit($id)
    {
        //
    }
 
    /**
     * Update the specified resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function update(Request $request, $id)
    {
        //
    }
 
    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        //
    }
}

Step 8: Create Route

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

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?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', '[email protected]');
Route::get('fetch', '[email protected]');
?>

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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!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() {
            $('#dataTable').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ url('fetch') }}',
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'email', name: 'email' },
                    { data: 'created_at', name: 'created_at' }
                ]
            });
        });
    </script>
</head>
<body>
 
<div class="container">
    <h2>Laravel Datatable using Yajra Tutorial Example</h2>
    <table class="table table-bordered" 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
1
php artisan serve

Please follow and like us:
error
fb-share-icon
Tweet
fb-share-icon

Recommended Posts:

  • How To Create Line & Area Chart In Codeigniter With AmChart
  • How to get last inserted id from table in Laravel
  • How to send an email with HTML template using PHP and Ajax
  • laravel eloquent Where Like query example
  • laravel eloquent WhereTime query example
Ajax, Laravel, MySql Tags:how to use yajra datatable in laravel, laravel datatable, laravel datatable example, Laravel Framework, laravel from scratch, laravel yajra datatable, yajra datatable example

Post navigation

Previous Post: How to install and download nodejs and npm for window os
Next Post: How to install node js on ubuntu 16.04 and 18.04

Latest Posts

  • Laravel Check If Foreach is Empty Example
  • Laravel Check Array Empty in Blade
  • PHP Datatables CRUD Example
  • How to Convert Date and Time from one timezone to another in php
  • how to get current date and time in php
  • Drag and Drop Reorder Items with jQuery, PHP & MySQL
  • Laravel 9 Toastr Notifications Example Tutorial
  • Laravel 9 CRUD Operation Example Using Google Firebase
  • Laravel 9 CKeditor Image Upload With Example
  • Laravel 9 Summernote Image Upload With Example

Tools

  • Compound Interest Calculator
  • Hex to RGB Color Converter
  • Pinterest Video Downloader
  • Birthday Calculator
  • Convert JSON to PHP Array Online
  • JavaScript Minifier
  • CSS Beautifier
  • CSS Minifier
  • JSON Beautifier
  • JSON Minifier

Categories

  • Ajax
  • Angular
  • Angularjs
  • Bootstrap
  • Codeigniter
  • Css
  • Htaccess
  • Javascript
  • Jquery
  • Laravel
  • MongoDB
  • MySql
  • Nodejs
  • Php
  • React JS
  • Shopify Api
  • Ubuntu

Tags

angular 10 tutorial angular 11 ci tutorial codeigniter 4 image upload Codeigniter 4 Tutorial codeigniter tutorial CodeIgniter tutorial for beginners codeigniter with mysql crud operation eloquent relationships file upload File Validation form validation Image Upload jQuery Ajax Form Handling jquery tricks jquery tutorial laravel 6 Laravel 6 Eloquent Laravel 6 Model laravel 6 relationship laravel 6 relationship eloquent Laravel 6 Routing laravel 7 Laravel 7 Eloquent laravel 7 routing laravel 7 tutorial Laravel 8 laravel 8 example laravel 8 tutorial laravel 9 example laravel 9 tutorial Laravel Framework laravel from scratch Laravel Socialite laravel social login nodejs pagination payment gateway php with mysql react js tutorial rewrite rule send mail validation wysiwyg editor

Copyright © 2018 - 2022,

All Rights Reserved Powered by XpertPhp.com