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,
Lets include the required bootstrap and bootgrid js and css files along with jquery,
next we will create a table,
| # | First Name | Last Name | Gender | Country | Salary | Actions | |
|---|---|---|---|---|---|---|---|
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, Step 2 : Fetching data from databaseWe 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 php artisan make:model BootGridData
place the following code in it, |
