Bootgrid implementation in laravel

Bootgrid implementation in laravel

Hello readers, here we will discuss about jQuery Bootgrid plugin which is a powerful table extender. This Bootgrid plugin provides the functionalities which a table needs like search, sort, pagination, earlier we implemented search, paginationpagination and search functionalities separately in laravel. Now we will implement those with Bootgrid plugin in our laravel application.

Working Demo      Project on Github

Source Code Explanation Video :

We collect some random data from mockaroo.com and then use that data in our application to display them in a table and apply bootgrid to it.

Step 1: Initializing bootgrid table

Firstly we will create a view file and place the code for creating a table with bootgrid ids and related things,

Let’s include the required bootstrap and bootgrid js and CSS files along with jquery,

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-bootgrid/1.3.1/jquery.bootgrid.min.js"></script>

next, we will create a table,

<table id="grid-basic" class="w3-table-all w3-card-4">
    <thead>
      <tr class="w3-cyan">
        <th data-column-id="id" data-type="numeric" data-order="asc">#</th>
        <th data-column-id="first_name" >First Name</th>
        <th data-column-id="last_name" >Last Name</th>
        <th data-column-id="gender" >Gender</th>
        <th data-column-id="email" >Email</th>
        <th data-column-id="country" >Country</th>
        <th data-column-id="salary">Salary</th>
        <th data-column-id="actions" data-formatter="actions" data-sortable="false">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
</table>

In the table above, we see some data elements like data-column-id, data-type, data-order, data-formatter, data-sortable in the table head section. Those are the elements used by bootgrid like, data-order="asc" sorts the items in that row in ascending order, data-type="numeric" indicates that items in that row are numbers.

Step 2: Fetching data from database

We collect some fake data and store it in our database, the table consists of id, first_name, last_name, email, gender, country, and salary.

Bootgrid implementation in laravel - justlaravel.com
Bootgrid implementation in laravel – justlaravel.com

the complete SQL file can be found here.

Working Demo      Project on Github

Double the learning and saving. Buy 1 Get 1 on premium e-degrees

Now we set up the database connection in /.env file or in /config/database.php with appropriate details. for more details on database setup, see one of the previous tutorial on the same here and Application structure in laravel here.

Now we create a model file for accessing the data in the database, running the following command will create a model file with the given name at /app/BootGridData.php

php artisan make:model BootGridData

place the following code in it,

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class BootGridData extends Model
{
    protected $table="bootgrid_data";
}

now our model is ready, we can now fetch the data from it and pass that data to the view created above,

So in routes file, place the following code to fetch all the data from the table,

<?php
use App\BootGridData;
Route::get('/', function () {
  $data = BootGridData::all();
  return view('welcome')->withData($data);
});

Step 3: Showing the data

In the previous step we pass a variable $data to the view, it contains all the data we needed, so the view file where we created a table, we show this data in those <td> elements.

edit the view file as follows,

         <tbody>
            @foreach($data as $details)
            <tr>
               <td>{{$details->id}}</td>
               <td>{{$details->first_name}}</td>
               <td>{{$details->last_name}}</td>
               <td>{{$details->gender}}</td>
               <td>{{$details->email}}</td>
               <td>{{$details->country}}</td>
               <td>{{$details->salary}}</td>
            </tr>
            @endforeach
         </tbody>

we looped the $data variable and displayed all the results in the table.

Step 4: Working with Bootgrid

As we see in the table the last column ‘Actions’. Yea, we will edit and delete the data here.
We have two buttons for edit and delete, when clicked on those a modal will pop up showing the details and asking us to edit and delete the details in that row.

While doing such things we have to add a data element ‘formatter’ to that column. as we see data-formatter="actions" is present on Actions column.

now we add those two buttons as follows,

           $("#grid-basic").bootgrid({
             formatters: {
               "actions": function(column, row)
               {
                 return "<button onclick=\"document.getElementById('edit').style.display='block'\" data-id=\"" + row.id + "\" data-first_name=\"" + row.first_name + "\" data-last_name=\"" + row.last_name + "\" data-email=\"" + row.email + "\" data-gender=\"" + row.gender + "\" data-country=\"" + row.country + "\" data-salary=\"" + row.salary + "\" class=\"w3-btn w3-blue w3-small edit\"><span class=\"fa fa-pencil\"></span></button> " +
                 "<button onclick=\"document.getElementById('delete').style.display='block'\" data-first_name=\"" + row.first_name + "\" data-last_name=\"" + row.last_name + "\" data-id=\"" + row.id + "\" class=\"w3-btn w3-blue w3-small delete\"><span class=\"fa fa-remove\"></span></button>";

               }
             }});

Step 4.1: Edit Modal

When edit button is clicked a modal with a form containing all the details pop up and lets us to edit the details there as show in the figure below,

Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com

the code for the edit modal is,

      <div id="edit" class="w3-modal">
         <div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px">
            <div class="w3-center"><br>
               <span onclick="document.getElementById('edit').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">&times;</span>
            </div>
            <header class="w3-container w3-text-indigo w3-margin-top-64">
               <h1>Edit Details</h1>
            </header>
            <form class="w3-container" action="/save" method = "POST">
              {{ csrf_field() }}
              <input type="hidden" id="edit_id" name="edit_id">
               <div class="w3-section">
                  <div class="w3-row">
                     <div class="w3-col s4"><label><b>First name</b></label></div>
                     <div class="w3-col s8"><input class="w3-input w3-border w3-margin-bottom" id="fname" type="text" placeholder="Enter First name" name="firstname" required>
                     </div>
                  </div>
                  <div class="w3-row">
                     <div class="w3-col s4">
                        <label><b>Last name</b></label>
                     </div>
                     <div class="w3-col s8"><input class="w3-input w3-border w3-margin-bottom" id="lname" type="text" placeholder="Enter Last name" name="lastname" required></div>
                  </div>
                  <div class="w3-row">
                     <div class="w3-col s4">
                        <label><b>Gender</b></label>
                     </div>
                     <div class="w3-col s8">
                        <select class="w3-select w3-border w3-margin-bottom" id="gender" name="gender" required>
                           <option value="" disabled selected>Choose your option</option>
                           <option value="Male">Male</option>
                           <option value="Female">Female</option>
                        </select>
                     </div>
                  </div>
                  <div class="w3-row">
                     <div class="w3-col s4">
                        <label><b>Email</b></label>
                     </div>
                     <div class="w3-col s8"><input class="w3-input w3-border w3-margin-bottom" id="email" type="email" placeholder="Enter Email" name="email" required></div>
                  </div>
                  <div class="w3-row">
                     <div class="w3-col s4">
                        <label><b>Country</b></label>
                     </div>
                     <div class="w3-col s8"><input class="w3-input w3-border w3-margin-bottom" id="country" type="text" placeholder="Enter Country" name="country" required></div>
                  </div>
                  <div class="w3-row">
                     <div class="w3-col s4">
                        <label><b>Salary</b></label>
                     </div>
                     <div class="w3-col s8"><input class="w3-input w3-border" id="salary" type="text" placeholder="Enter Salary" name="salary" required></div>
                  </div>
                  <button class="w3-btn-block w3-indigo w3-section w3-padding" type="submit">Save</button>
               </div>
            </form>
            <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
               <button onclick="document.getElementById('edit').style.display='none'" type="button" class="w3-btn w3-red">Cancel</button>
            </div>
         </div>
      </div>

and for displaying the data in the modal, we use the data elements we have bonded to the button and use them to set values in the edit modal form,

               $(this).find(".edit").click(function (e) {
                 $('#edit_id').val($(this).data("id"));
                 $('#fname').val($(this).data("first_name"));
                 $('#lname').val($(this).data("last_name"));
                 $('#gender').val($(this).data("gender"));
                 $('#email').val($(this).data("email"));
                 $('#country').val($(this).data("country"));
                 $('#salary').val($(this).data("salary"));
               });

Step 4.2: Delete Modal

Similarly, when we click on delete button, a modal asks us for confirmation to delete as shown in figure below,

Working Demo      Project on Github

Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com

the code for delete modal,

      <div id="delete" class="w3-modal">
         <div class="w3-modal-content w3-card-8 w3-animate-zoom" style="max-width:600px">
            <div class="w3-center"><br>
               <span onclick="document.getElementById('delete').style.display='none'" class="w3-closebtn w3-hover-red w3-container w3-padding-8 w3-display-topright" title="Close Modal">&times;</span>
            </div>
            <header class="w3-container w3-text-indigo w3-margin-top-64">
               <h1>Delete</h1>
            </header>
            <form class="w3-container" action="/delete" method="POST">
              {{ csrf_field() }}
              <input type="hidden" id="del_id" name="del_id">
               <div class="w3-section">
                  <p>Are you sure, you want to delete <span id ="delete_name"></span> ?</p>
                  <div class="w3-center"><button type="submit" class="w3-btn w3-indigo"> Delete </button></div>
               </div>
            </form>
            <div class="w3-container w3-border-top w3-padding-16 w3-light-grey">
               <button onclick="document.getElementById('delete').style.display='none'" type="button" class="w3-btn w3-red">Cancel</button>
            </div>
         </div>
      </div>

and for displaying the data in the modal, we use the data elements we have bonded to the button and use them them to set values in the delete modal form,

               $(this).find(".delete").click(function (e) {
                 $('#del_id').val($(this).data("id"));
                 $('#delete_name').html($(this).data("first_name") +" "+ $(this).data("last_name"));
               });

Step 5: Deleting and Editing (the laravel part)

In the edit modal form above we need to edit the details, stored them in the database and show the modified result, so when the ‘Save’ button is clicked in the edit modal form we call a function to do those,  as we see the edit form’s action is routed to ‘/save’ check the code below,

Route::post('/save', function () {
  $data = Request::all();
  $edit = BootGridData::where('id',$data['edit_id'])->first();
  $edit->first_name=$data['firstname'];
  $edit->last_name=$data['lastname'];
  $edit->email=$data['email'];
  $edit->gender=$data['gender'];
  $edit->country=$data['country'];
  $edit->salary=$data['salary'];
  $edit->save();
  return Redirect::back();
});

Similarly for delete, when delete button is clicked in the modal it is routed to,

Route::post('/delete'function () {
 $data = Request::all();
 $delete = BootGridData::where('id',$data['id'])->delete();
 return Redirect::back();
});

 

Working Demo

Look at the below reference screenshots,

Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com
Bootgrid implementation in laravel – justlaravel.com

 

Working Demo      Project on Github



4 thoughts on “Bootgrid implementation in laravel”

  • 1
    northlabz2 on October 10, 2016 Reply

    Hi, do you have a ajax server side example of this?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.