Using jQuery DataTables in Grails Application
Posted By : Ravi Kumar | 10-Jan-2014
"Data Tables" a JavaScript Library -JQuery plugin. It's highly flexible tool and supports some advanced interaction controls to any HTML Table.
DataTable Key Features :
1) Column sorting
2) Advanced filtering
3) Smooth width handling in Table Data
4) JQuery UI support
5) Can add external JQuery plugins with ease
6) It is free for you to use! DataTables is available under two licenses: GPL v2 license or a BSD (3-point) license
Dependencies and File Structure :
To implement dataTable there is must needed CSS and JS plugins :
CSS :
1. demo_page.css
2. demo_table.css
JS :
1. jQuery.min.js (should be used updated jquery lib)
2. jquery.dataTables.js
For other UI changes and functionality we can add other jQuey plugins.
Customized DataTable Example :
Extra needed plugins for customize DataTable like above example image :
CSS :
1. chosen.css : for custom Drop Down List [1]
2. style.css : all other custom UI changes like DatePicker [2], Glyphicons [3], pagination and many more.
JS :
1. application.js : (custom js) for customize filtering and advanced column filters.
2. responsive.js : (custom js) for adjusting responsiveness
Data Table will work absolutely fine and smooth with Twitter Bootstrap so there should be needed some more CSS and JS :
1. bootstrap.min.css
2. bootstrap-responsive.min.css
3. bootstrap.min.js
Example Code to implement in Grails :
<html >
<table class="table table-hover table-nomargin table-bordered" id="stylesTable">
<thead>
<tr>
<th>Style #</th>
<th>Name</th>
<th class='hidden-350'>Designer</th>
<th class='hidden-1024'>Dept Code</th>
<th class='hidden-480'>Action</th>
</tr>
</thead>
<tbody>
<g:each in="${stylesList}" var="style">
<tr>
<td>${style.id }</td>
<td>${style.name}</td>
<td class='hidden-350'>${style.designer.name}</td>
<td class='hidden-1024'>${style.department.code}</td>
<td class='hidden-480'>
<g:remoteLink class="btn btn-dark" title="Items" controller="" action="" params='[styleId:"${style.id}"]' update="itemsGrid"><i class="icon-table"></i></g:remoteLink>
<g:link class="btn btn-dark" title="Style Details" action="" controller="" params='[styleId:"${style.id}"]'><i class="icon-search"></i></g:link>
</td>
</tr>
</g:each>
</tbody>
</table>
</html >
Bind plugins code in a seperate js file : (application.js )
<script >
$( document ).ready(function() {
// bind DataTable on table ID
$('#stylesTable').dataTable( {
/* to increase the process and speed for loading data from server
* (check more properties if needed )
*/
"bProcessing": true,
"sPaginationType": "full_numbers",
"bDeferRender": true
});
bindDataTable();
chosen();
bindDateTimePicker();
});
/* Chosen (select box - chosen) */
function chosen(){
if($('.chosen-select').length > 0){
$('.chosen-select').each(function(){
var $el = $(this);
var search = ($el.attr("data-nosearch") === "true") ? true : false,
opt = {};
if(search) opt.disable_search_threshold = 9999999;
$el.chosen(opt);
});
}
}
function bindDateTimePicker(){
/* date picker */
if($('.datepick').length > 0){
$('.datepick').datepicker();
}
/* date range picker */
if($('.daterangepick').length > 0){
$('.daterangepick').daterangepicker();
}
/* time picker */
if($('.timepick').length > 0){
$('.timepick').timepicker({
defaultTime: 'current',
minuteStep: 1,
disableFocus: true,
template: 'dropdown'
});
}
}
</script >
Responsive DataTable :
There is several technoques or methods for making table responsive on the Web. Here are two methods that mostly used in todays period :
1. Hide some columns on specific view port
2. Render all table data rows as specific data blocks
1) Hide Columns :
Using media queries on specific view port hide columns.
Example :
<html > <table class="table table-hover table-nomargin table-bordered" id="stylesTable"> <thead> <tr> <th>Style #</th> <th>Name</th> <th class='hidden-350'>Designer</th> <th class='hidden-1024'>Dept Code</th> <th class='hidden-480'>Action</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td class='hidden-350'></td> <td class='hidden-1024'></td> <td class='hidden-480'></td> </tr </tbody> </table> </html >
Example : Viewport - 320px
Example : Viewport - 480px
2) Render all table data rows as specific data blocks :
Use specific media queries to dislay table rows in a specific manner as blocks
<script > </script >
Example : Viewport - 320px
Reference Sites :
You can explore all the features and documentation in details from :
Responsive method 2nd : Render all table data rows as specific data blocks reffered from www.csstricks.com
Thanks
Ravi Kumar
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Ravi Kumar
Ravi is a creative UI designer with experience and capabilities to build compelling UI designs for Web and Mobile Applications. Ravi likes Tech Quizes and playing Football.