Home » Integrations » How to implement datatables in laravel
Hello readers, am back with another post to let you know how to implement datatables plugin in laravel. Datatables is jQuery plugin for table extender, it provides the functionalities like search, sort, pagination on a table of information to handle the data more effectively. Earlier we implemented search, pagination, pagination on search results individually without using any plugins, here we will do it using datatables plugin.
There are also a similar table extender plugins like datatables and bootgrid is one of them, a post on implementing bootgrid is also available here.
Here we used the basic initialisation of datatables, i made another post on implementing datatables server side, i recommend you to have a look at it here.
Step 1 : Initializing datatables
Lets include the required bootstrap, datatables js and css files along with jquery,
| src=”https://cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js”> href=”//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css”> href=”https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css”> |
We show the data in a table so lets create the table we require,
| # | First Name | Last Name | Gender | Country | Salary ($) | Actions | |
|---|---|---|---|---|---|---|---|
Note that the table above has an id $(document).ready(function() { $(‘#table’).DataTable(); } );
Step 2 : Fetching data from databaseWe collect some fake data from mockaroo.com and store it in our database, the table consists of id, first_name, last_name, email, gender, country and salary fields. The sql file can be found here. Now we set up the database connection details in /.env file or in /config/database.php with appropriate details. for reference post on database set up look 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/Data.php. php artisan make:model Data
place the following code in it, |
