Showing posts with label datatable. Show all posts
Showing posts with label datatable. Show all posts

Friday, December 7, 2012

How to Know If The DataTables is Running

That's just a tip for you guys who are working with the DataTables plug-in. If you need to know if the DataTables JS code is properly running, you can just pass a parameter to it to have a message box as result.

That's is really simples:
$(document).ready( function() {
   $('#example').dataTable( {
     "fnInitComplete": function(oSettings, json) {
       alert( 'DataTables has finished its initialisation.' );
     }
   } );
} )

The fnInitComplete function is called when the Datatables finishes its initialization, so if that doesn't show up, you will be able to know that the plug-in haven't started.

I know that's quite simple, but this small code has helped me to find out an another big problem.

Monday, November 26, 2012

How to Add DataTables Plugin in Grails

DataTables is an awesome plugin for the JQuery. It provides many features as filter and sort without you have to code them at all. In this post I'll show you the easiest way to use the DataTables plugin in Grails.

First, install the jquery-datatables plugin on your project:

grails install-plugin jquery-datatables

After, download the most reticently  DataTables package and copy the following files to your web-app project folder:

css/jquery.dataTables.css
images/*
js/jquery.dataTables.js

On the views/layouts/main.gsp file, add the following lines:

Within the head tag:

<link rel='stylesheet' href="${resource(dir: 'css', file: 'jquery.dataTables.css')}" type="text/css"/> 

<g:javascript>
   $(document).ready(function() {
      $("#dataTablesList").dataTable();
   });
</g:javascript>

Before the </body> tag:

<g:javascript library="datatables" src="jquery.dataTables.js"/>

Finally, add the dataTablesList id on the table tag of your list.gpg file:

<table id="dataTablesList">

If everything goes fine, your default list view will be able as a DataTables component and so, you will have something like that:

http://www.datatables.net/release-datatables/examples/basic_init/zero_config.html

Note that both, Grails default list and DataTables plugin have a pagination feature. So, maybe you will want to disable the Grails pagination to let the DataTables do its job by itself. For that, you can pass the counting item number of your domainClass as the max item list value in your action list (on the Controller):

params.max = Math.max(max ?: <your class>.count(), 1)

Remember that this is just a simple example of how to use the DataTables plugin in Grails by getting data directly from DOM. After that, you can do your own customization.

Maybe you want to see:

- DataTables examples page;
Using jQuery DataTables In Grails (with JSON).