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
Step 1 : Initializing datatables
Lets include the required bootstrap, datatables js and css files along with jquery,
We show the data in a table so lets create the table we require,
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<table class="table"id="table">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">First Name</th>
<th class="text-center">Last Name</th>
<th class="text-center">Email</th>
<th class="text-center">Gender</th>
<th class="text-center">Country</th>
<th class="text-center">Salary($)</th>
<th class="text-center">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Note that the table above has an id id="table" we use that id to initiate datatables,
1
2
3
4
5
<script>
$(document).ready(function(){
$('#table').DataTable();
});
</script>
Step 2 : Fetching data from database
We 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.
1
php artisan make:model Data
place the following code in it,
1
2
3
4
5
6
7
8
9
10
<?php
namespaceApp;
useIlluminate\Database\Eloquent\Model;
classDataextendsModel
{
protected$table="datatables_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/web.php file, place the following code to fetch all the data from the table,
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.
Datatables implementation in laravel – justlaravel.com
Step 4 : Deleting and Editing (the laravel part)
As we see in the table the last column ‘Actions’ with edit and delete options..
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.
We use only one modal for editing and deleting purpose, as we did in previous tutorial about ajax crud operations, almost the same code we use here too, but with some extra fields in the edit modal form.
Step 4.1 : Edit Modal
So when edit button in action column is clicked, we will adjust the
only modal with appropriate buttons and actions like name of the button
in the modal, content in the modal.
following is the code executed when edit button is clicked,
Here we used a function fillmodalData() function to get
the details of that particular row, the button’s data attribute contains
all the info about that row so we use this inf and set them in the
modal,
1
2
3
4
5
6
7
8
9
functionfillmodalData(details){
$('#fid').val(details[0]);
$('#fname').val(details[1]);
$('#lname').val(details[2]);
$('#email').val(details[3]);
$('#gender').val(details[4]);
$('#country').val(details[5]);
$('#salary').val(details[6]);
}
After the modal is shown, we can edit the data, then the data is saved after passing all the validation rules.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
$('.modal-footer').on('click','.edit',function(){
$.ajax({
type:'post',
url:'/editItem',
data:{
'_token':$('input[name=_token]').val(),
'id':$("#fid").val(),
'fname':$('#fname').val(),
'lname':$('#lname').val(),
'email':$('#email').val(),
'gender':$('#gender').val(),
'country':$('#country').val(),
'salary':$('#salary').val()
},
success:function(data){
if(data.errors){
$('#myModal').modal('show');
if(data.errors.fname){
$('.fname_error').removeClass('hidden');
$('.fname_error').text("First name can't be empty !");
}
if(data.errors.lname){
$('.lname_error').removeClass('hidden');
$('.lname_error').text("Last name can't be empty !");
}
if(data.errors.email){
$('.email_error').removeClass('hidden');
$('.email_error').text("Email must be a valid one !");
}
if(data.errors.country){
$('.country_error').removeClass('hidden');
$('.country_error').text("Country must be a valid one !");
}
if(data.errors.salary){
$('.salary_error').removeClass('hidden');
$('.salary_error').text("Salary must be a valid format ! (ex: #.##)");
Datatables implementation in laravel – justlaravel.com
Basically when update button is clicked, it is routed to ajax call /editdata,
it checks for validations, throws errors if validator fails or it saves
the data in database. So in the success function of the ajax call
first check for errors, if any we display them appropriately or replace
the row with new data.
![About [span]me[/span]](http://images.huffingtonpost.com/2016-05-24-1464106527-7011249-paper_inspiration.jpg)
