Simplify Laravel 7 Datatables - No AJAX Required!

How to use Laravel 7 Datatables without AJAX - JQuery-Plugin

Laravel 7 Datatables Without AJAX

In this article we will learn How to use Datatables in Laravel 7 using JQuery Plugin . Datatable is basically a JQuery Plugin provides us the advanced functionality to our html table for searching , pagination , sorting , filter and advance pagination with low reload time .

We will learn how to use Datatables in Laravel with example . You just need to follow some steps to use Datatables .So let's dive in and see how to use Datatables in Laravel .

Table of Content :

  • Install a Project
  • Add Authentication
  • Migrate Tables
  • Insert Mass data using Tinker
  • Datatable JQuery Plugin
  • Fetching Data from Controller
  • View file
  • Output

Step 1 - Install a Project :

If you haven't installed a laravel project yet , Use the following command and install a laravel 7 project .

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

Step 2 - Add Authentication :

Its optional that if you want to add authentication , you can add or you can skip also . To add laravel default Authentication ( Login / Signup ) you can use following commands one by one .

composer require laravel/ui

php artisan ui vue --auth

npm install

Step 3 - Migrate Table  :

After adding Authentication you need to migrate your tables to store your Authentication data otherwise it will not work . For migration you can use the following command .

php artisan migrate

Step 4 - Mass Input using Tinker :

This step is also optional but it will be helpfull for understanding how JQuery datatables works with mass data in table . For testing pursose it will be very difficult for inserting lots of data in the table . To overcome this we can use php tinker to insert mass data into the table .

Use the following command to use php tinker to insert lots of data inside the table .

php artisan tinker

factory(App\User::class, 10)->create(); // to input 10 random data

Step 5 - Using JQuery Datatable :

We just need to add some JQuery CDN for using datatables . Add the following css CDN just above the </head> tag in your " project-name\resources\views\app.blade.php " .

<link rel="stylesheet" type="text/css" href="">

Add the following CDNs just after the </body> tag inside your " project-name\resources\views\app.blade.php " file .

<script src="" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<script src=""></script>

<script type="text/javascript">
    $(document).ready( function () {
} );

Step 6 - Fetching Data from Controller :

For using Datatables you don't need to do any changes on your controller . Fetch your data as usual .

homeController.php :

public function index()
        return view('home',compact('data'));

Step 7 - Setting up View File :

The very last thing you need to do is add an attribute id="myTable" on your <table> tag as shown in the following .

<table id="myTable">

home.blade.php : 

<div class="container">
   <div class="row justify-content-center">
      <div class="col-md-8">
         <div class="card">
            <div class="card-body">
               @if (session('status'))
               <div class="alert alert-success" role="alert">
                  {{ session('status') }}
               <table class="table" id="myTable">
                        <th scope="col">id</th>
                        <th scope="col">Name</th>
                        <th scope="col">Email</th>
                     @foreach($data as $value)
                        <th scope="row">{{$value->id}}</th>

Output :

Laravel 7 Datatables Without AJAX

Previous Post Next Post

Contact Form