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.
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,
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.
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
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
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,
the code for the edit modal is,
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,
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,
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,
Look at the below reference screenshots,