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,
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 – phpnewspot.blogspot.in
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 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
1
php artisan make:model BootGridData
place the following code in it,
1
2
3
4
5
6
7
8
9
10
<?php
namespaceApp;
useIlluminate\Database\Eloquent\Model;
classBootGridDataextendsModel
{
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,
1
2
3
4
5
6
<?php
useApp\BootGridData;
Route::get('/',function(){
$data=BootGridData::all();
returnview('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,
1
2
3
4
5
6
7
8
9
10
11
12
13
<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,
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,
1
2
3
4
5
6
7
8
9
$(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,
Bootgrid implementation in laravel – phpnewspot.blogspot.in
the code for delete modal,
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,
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,
![About [span]me[/span]](http://images.huffingtonpost.com/2016-05-24-1464106527-7011249-paper_inspiration.jpg)
