Blog

  •  

    In my project I need functionality of printing data , PDF and XLS file of that data from front end. After spending a lot time over internet, I found code in java which provides such kind of functionality but It seems that code very much cumbersome which was difficult to manage.

    Then I investigated more over internet and found a solution in JQuery which provided me same functionality using few lines of code. I used dataTable which provide printing data , PDF and XLS file using JQuery and this functionality in dataTable is known as oTableTool.

    Here I will show you how It works by using grails project in Spring Tool Suits(STS).

     

    Step 1:

    Create a grails project using

    File>New>Grails Project

     

    Step 2:

    Put CSS file in Project_Directory/Project_Name/web-app/css directory.

     

    1. dataTables.tableTools.css

    2. jquery.dataTables.css

     

    Step 3:

    Put JS file in Project_Directory/Project_Name/web-app/js directory.

     

    1. dataTables.tableTools.js

    2. jquery.dataTables.js

     

    Step 4:

     

    Put JS file in Project_Directory/Project_Name/web-app/swf directory.

     

    1. copy_csv_xls.swf

    2. copy_csv_xls_pdf.swf

     

    Step 5:

    Create a controller which will accept request and render appropriate view .Now create a table in html to view the data.

     

    
    
    $('#example').dataTable({
    			"dom" : 'CT<"clear">lfrtip',
     			"oTableTools" : {
    				"sSwfPath" : "../swf/copy_csv_xls_pdf.swf",
    				"aButtons" : [ "copy", "print", {
    					"sExtends" : "collection",
    					"sButtonText" : "Save",
    					"aButtons" : [ "csv", "xls", "pdf" ]
    				} ]
    			}
    		});
    
    
    

    <"clear">

    In above code I used T in dom which is used to show oTableTool functionality.

    example : Table Id

    sSwfPath : Path of .swf file.

    aButtons : Buttons for copy, print, pdf and xls functionality.

     

    Feel free to ask any query relavent to this code.

     

    Thank You

     

Tags: jquery , datatable