Advance Features of Jquery Datatable in Spring MVC with Example

Few months back we have seen one of the important jquery plugin called Jquery Datatable. Jquery Datatable provides many features like pagination, ordering, search etc. Although we have seen only some of its basic features. In this tutorial we are going to see advance features of jquery datatable in Spring MVC with example.

JQuery Datatable in Spring MVC with Example

JQuery Datatable in Spring MVC with Example

Before going to see its advance features I recommend every one of you to know basic features of Jquery Datatable. In earlier tutorial we have created a Jquery Datatable application along with Spring MVC. This tutorial is a continuation of my previous Jquery Datatable tutorial, so we will be using same project structure and same files.

JQuery Datatable in Spring MVC with Example

JQuery Datatable in Spring MVC with Example

Common.css

I have added few more styles  for header, filters and for article tag in common.css

body{
 background-color: #eee;
}
img.dataTableExample{
 width:50%;
 padding-left: 25%;
}
div.dataTables_wrapper{
 padding-left:15%;padding-right:15%;
}
th {
 background-color: #4CAF50;
 color: white;
}
div.filters{
 background-color: ffffff;
 padding: 2%;
 
 color: #b72b21;
}
tr:nth-child(even) {background-color: #f2f2f2}
nav{
 width:20%;
 float: left;
}
ul{
 overflow-y: scroll;
 height: 200px;
 list-style-type: none;
}
h1{
 padding-left: 40%;padding-bottom: 10%;
}
h4{
 padding-left:40%;
}
article{
 width: 80%;
 float: right;
 border-left: 17%;
}

body.jsp

In body.jsp, i have added <header> tag, an empty <ul> tag and a submit <button> tag. Later using javascript code we are going to add <div> tags between <ul> tag.


<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ page session="false" %>
<html>
<head>
 <title>JQuery Datatable + Spring MVC Example</title>
</head>
<body>

<div style="width: 100%;">

<header>

<h1>Spring MVC + JQuery Datatable</h1>

 </header>


<nav>

<h4>Employee Names</h4>


<ul>
 </ul>

 <button style="margin-left: 35%;">Submit</button>
 </nav>


<article>

<table id="example" class="display nowrap" cellspacing="0">

<thead>

<tr>

<th>Name</th>


<th>Desgination</th>


<th>Salary</th>


<th>Country</th>

 </tr>

 </thead>

 </table>

 </article>

 </div>

</body>
</html>
<script type="text/javascript">
$(document).ready(function(){
      var data =eval('${employeeList}');
      var table = $('#example').DataTable( {
                    "aaData": data,
                    "aoColumns": [
                        { "mData": "name"},
                        { "mData": "desgination"},
                        { "mData": "salary"},
                        { "mData": "country"} 
                    ],
                   "columnDefs": [ 
                        { 
                           "render" : function(data, type, row) {
                            return "<a class='empId' value="+data+" href=#>" + data + "</a>";
                            
                        },
                   "targets" : 0
                   },
                 ],
                   "paging" : true,
                   "pageLength" : 5,
                    "ordering" : true,
     });
           getFilters(table.column(0).data().unique());
           $('a.empID').click(function(e){
                 var employeeInfo = table.row($(this).parents('tr')).data();
                 alert("Employee Details \n\n\n Employee Name is :" + employeeInfo['name'] +"\n Employee Designation is: "+ employeeInfo['desgination'] +" \n Employee Salary is : "+employeeInfo['salary'] );
           });
         $('button').on('click',function(e){
                if($('input[type="checkbox"]:checked').length&amp;amp;amp;lt;1){
                alert('Select atlease one employee');
         }else{
                 var employeeNames = $('input[type="checkbox"]:checked').map(function(){
                 return this.value;
              }).get();
         var employeeRegex = "";
         $.each(employeeNames,function(key,value){
               if(key!=employeeNames.length-1){
               employeeRegex+=value+"|";
         }else{
             employeeRegex+=value;
         }
     });
      $('#example').DataTable().search(employeeRegex,true,false).draw();
  }
 });
});

function getFilters(empName){
 $.each(empName,function(key,value){
 $('ul').append('
<div class="filters">
<li><input class="empName" type="checkbox" value="'+value+'">'+value+'</li>
</div>

');
 });

JQuery Datatable in Spring MVC with Example

JQuery Datatable provides lots of advance features and now we will see some of the features of JQuery Datatable in Spring MVC with Example.

JQuery Datatable Options

      columnDefs: columnDefs  option will be used if we want to do any manipulation in any of the table row/column.

      render: In render option we have to write the actual DOM manipulation.

      targets: Using target option we will specify the column where we are doing the manipulation.

JQuery Datatable in Spring MVC with Example

JQuery Datatable in Spring MVC with Example

var table = $('#example').DataTable( {
 "aaData": data,
 "aoColumns": [
 { "mData": "name"},
 { "mData": "desgination"},
 { "mData": "salary"},
 { "mData": "country"} 
 ],
 "columnDefs": [ 
 { 
 "render" : function(data, type, row) {
 return "&amp;amp;amp;lt;a class='empId' value="+data+" href=#&amp;amp;amp;gt;" + data + "&amp;amp;amp;lt;/a&amp;amp;amp;gt;";
 },
 "targets" : 0
 },
 ],
 "paging" : true,
 "pageLength" : 5,
 "ordering" : true,
 });

Methods in jQuery Datatable

jQuery Datatable also provide lot of methods, we will see few of the methods in JQuery Datatable in Spring MVC with Example.

row: row method will be used if we want to get any of the row information or if we want to work with any of the row information.

data: data method is used to get values of any of the row(s) or column(s)

JQuery Datatable in Spring MVC with Example - Method

JQuery Datatable in Spring MVC with Example – Method – Unique


$('a.empID').click(function(e){
var employeeInfo = table.row($(this).parents('tr')).data();
alert("Employee Details \n\n\n Employee Name is :" + employeeInfo['name'] +"\n Employee Designation is: "+ employeeInfo['desgination'] +" \n Employee Salary is : "+employeeInfo['salary'] );
});

search: Search method used to filter the datatable based on the filters parameter passed as a parameter. And we want to search for more than one filter, then we have to append the filter value with “|” and pass as a filter parameter.

JQuery Datatable in Spring MVC with Example - Method - Search

JQuery Datatable in Spring MVC with Example – Method – Search


$('button').on('click',function(e){
if($('input[type="checkbox"]:checked').length&amp;amp;amp;amp;amp;lt;1){
alert('Select atlease one employee');
}else{
var employeeNames = $('input[type="checkbox"]:checked').map(function(){
return this.value;
}).get();
var employeeRegex = "";
$.each(employeeNames,function(key,value){
if(key!=employeeNames.length-1){
employeeRegex+=value+"|";
}else{
employeeRegex+=value;
}
});
$('#example').DataTable().search(employeeRegex,true,false).draw();
}
});

In our example, when we select the checkboxes and click on submit button. Then we pass those values as a parameter to search method and datatable will be filtered.

Now we have seen some more features of jQuery datatable in Spring MVC with Example. If you want to discuss about some other features of datatable, please mention it in comment box and i will try to provide one more tutorial along with those features.

If you have any queries in this jQuery datatable in Spring MVC with Example tutorial please comment your queries below and if you like this tutorial please share it with your friends and colleagues.

Click below download link to get jQuery datatable in Spring MVC with Example.

JQuery Datatable in Spring MVC with Example

JQuery Datatable in Spring MVC with Example