Create Datatable in Laravel

 Step 1:- Install Yajra Datatable Package

You can install Yajra Datatable package  by following command.

composer require yajra/laravel-datatables-oracle


 Step 2:-  Add Alias and provider to the app.php

config/app.php

'providers' => [

Yajra\DataTables\DataTablesServiceProvider::class,

]

'aliases' => [

'DataTables' => Yajra\DataTables\Facades\DataTables::class,

]


 Step 3:-  Define Route

In this we define routes to for view file and getting data and for doing this we need to go web.php

routes\web.php

Route::get('products', ['uses'=>'ProductController@alldata', 'as'=>'products.alldata']);

or

Route::get('products', 'ProductController@alldata')->name('products.alldata');


 Step 4:-  Define Controller

In this step we create a controller as ProductController to display layout, handel request and send responce to view page.

app/http/controllers/ProductController.php


<?php

namespace App\Http\Controllers;

use App\Product;

use Illuminate\Http\Request;

use DataTables;

class ProductController extends Controller

{

    public function alldata(Request $request)

    {

        if ($request->ajax()) {

            $data = Product::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('alldata');

    }    

}


 Step 5:-  Define View

In this final step create alldata view template as alldata.blade.php in

resources/views/alldata.blade.php

<!DOCTYPE html>

<html>

<head>

    <title>Product List</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>Product List</h1>

    <table class="table table-bordered data-table">

        <thead>

            <tr>

                <th>No</th>

                <th>Name</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('products.alldata') }}",

        columns: [

            {data: 'DT_RowIndex', name: 'DT_RowIndex'},

            {data: 'name', name: 'name'},

            {data: 'action', name: 'action', orderable: false, searchable: false},

        ]

    });

    

  });

</script>

</html>



You can see your output




Comments

Post a Comment

Popular posts from this blog

Add Css And Js Files on Specific Page In laravel

  1. Using Blade Layout Sections: Laravel's Blade templating engine provides a powerful way to manage layouts and include specific content on different pages. Here's how to achieve this: a. Base Layout ( layouts/app.blade.php ): <!DOCTYPE html> <html> <head> <title>My Website</title> @yield('page-css') <link rel="stylesheet" href="{{ asset('css/app.css') }}"> </head> <body> @include('partials.header') <main>@yield('content')</main> @include('partials.footer') @yield('page-js') <script src="{{ asset('js/app.js') }}"></script> </body> </html> b. Specific Page View ( views/home.blade.php ): @extends('layouts.app') @section('content')   @endsection @section('page-css')   <link rel="stylesheet" href="{{ asset('css/home.css') }}">  @endsection @se...
Read more

Xpendy Pending

 1) Experiment Xpendy | E-mail domain suggestion Done 2) Xpendy Experiment | Change red error color to orange Done 3) My Xpendy | Implementation of credit card payments in ChargeBee 4) My Xpendy | Briefing split audience Mailchimp 5) Xpendy | Customers can only do one conversion from oneclick email Done 6) Xpendy | Send letters by e-mail Done 7)My Xpendy | Optimization of IT and ES Done 8)Experiment Xpendy | XPE-0110 - Form field bigger than letter  pending 9)Xpendy | Implement experiment 100% on live website NL Done 10)Xpendy | Implement XPE-0112 experiment for AT website Done 11)Xpendy | Third mail - proof of arrival implementation Pending 12)Xpendy | Adding code for experimentation tool in progress 13)Xpendy | Automating SEO content + Add Button for changes & category error - feedback  in progress 14)Xpendy | Split testing collection mail NL via Mandrill Pending https://docs.google.com/spreadsheets/d/1C2NsDA72aeaIYDE7KNyTopcUernHWAvVGCocEzksKhQ/edit?usp=sharing 15)...
Read more

Laravel Join with two coloums

 <?php namespace App\Http\Controllers; use App\Models\User; use Illuminate\Support\Facades\DB; class UserController extends Controller {     public function getUserOrders()     {         // Using Eloquent with inner join (default)         $usersWithOrders = User::join('orders', function ($join) {             $join->on('users.id', '=', 'orders.user_id');             $join->on('users.email', '=', 'orders.email'); // Additional join condition         })->get();         // Using DB facade with a more complex join (optional)         $complexJoin = DB::table('users')             ->select('users.id', 'users.name', 'orders.id as order_id', 'orders.product_id', 'orders.created_at')             ->join('orders', function ($join) {   ...
Read more