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, pagination, pagination and search functionalities separately in laravel. Now we will implement those with Bootgrid plugin in our laravel application.
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,
Lets 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.
the complete sql file can be found here.
Now we set up the database connection in /.env file or in /config/database.php with appropriate details. for more details ondatabase setup, see one of the previous tutorial on the same hereand 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 BootGridDataplace the following code in it,
<?phpnamespace 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,
the code for the editmodal 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”>×</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 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 conformation to delete as shown in figure below,
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”>×</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();
});Screenshots :
