DataTables and Table tools:
In our Projects in one place or the other we need to display data in the tables and send data from table to any reports like pdf, csv or excel files
This can be easily obtained from data tables and table tools as follows:
Steps to add DataTables to your project:
Css:
Java Script:
$(document).ready(function() {
$('#example').DataTable();
} );
HTML:
Steps to add Table Tools:
Css:
Java Script:
$(document).ready( function () {
$('#example').dataTable( {
"dom": 'T<"clear">lfrtip',
"tableTools": {
"sSwfPath": "/swf/copy_csv_xls_pdf.swf"
}
} );
} );
to set the swfPath copy the copy_csv_xls_pdf.swf from the downloaded tabletools zip file and place in your project and set the path in the above sSwfPath line
Html:
After adding all the css and js links the final out put will be as follows
by clicking on the button you can save that particular file directly.
To define the button as your requirement
$('#example1').DataTable( {
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "${request.getContextPath()}/theme/script/datatable/copy_csv_xls_pdf.swf",
"aButtons": ["csv", "xls", "pdf", "print"]
}
});
Dynamically change the columns visibility:
Css:
Java Script:
$(document).ready(function() {
$('#example').DataTable( {
"dom": 'C<"clear">lfrtip',
"colVis": {
"buttonText": "Change columns"
}
} );
} );
No comments:
Post a Comment