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,

Lets include the required bootstrap and bootgrid js and css files along with jquery,

next we will create a 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

the complete sql file can be found here.

Working Demo      Project on Github

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

place the following code in it,

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,

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,

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,

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

the code for the editcmodal is,

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,

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,

Working Demo      Project on Github

Bootgrid implementation in laravel – justlaravel.com

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,

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,

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

 

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

 

Working Demo      Project on Github



2 thoughts on “Bootgrid implementation in laravel”

  • 18
    northlabz2 on October 10, 2016 Reply

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

Leave a Reply