Datatable is a plug in for Jquery using which we can display the reports with rich Interface.
It by default provides pagination and searching capabilities. It also supports different themes provided by Jquery.
In order to render Datatable, the targeted table HTML should be formatted with thead and tbody attributes as shown in the below piece of code.
<table id="table_id">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>etc</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
<td>etc</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
<td>etc</td>
</tr>
</tbody>
</table>
To convert above Table into JQuery data table we need to use below statement.
$(document).ready(function()
{
$('table_id’).Datatable();
} );
I.e. we need to invoke Datatable method using table object.
This Datatable method also has different options[attributes] using which we can configure it according to our requirements
When Datatable is rendered its columns will be of fixed width i.e. we can not resize them.
To make the columns resizable we need to include one plug-in called ColReorderWithResize.js and we need to set bAutoWidth attribute to false;
$(document).ready(function()
{
$('table_id’).Datatable
(
{
“bAutoWidth ”:false,
“sPaginationType”,”full_numbers”
}
);
} );
Datatable by default provides pagination also. We can also configure the pagination types using sPaginationType attribute.
$(document).ready(function()
{
$('table_id’).Datatable
(
{
“bDestroy”:true,
“sPaginationType”,”full_numbers”
}
);
} );
If you want to refresh the Datatable again and again with new data then we need to set “bDestroy” attribute to true.
$(document).ready(function()
{
$('table_id’).Datatable
(
{
bDestroy:true;
}
);
} );
Data table also provides the support to export the data to different formats like excel,pdf.
To export the data to excel and pdf we need to include one plugin called ‘Tanbletools.js’
And one .swf file “copy_cvs_xls_pdf.swf”.
Once we include above two files ,using below attribute we can add export facility in our Data table.
"oTableTools": {
"sSwfPath" : " cvs_xls_pdf.swf"
}
‘sSwfPath’ is the location of the swf file.
By default when we use “oTableTools” attribute,export to excel,pdf and print buttons are provided.
We can also change the buttons displayed using ‘aButtons’ attribute.
"oTableTools": {
"aButtons": ["xls"],
"sSwfPath" : "cvs_xls_pdf.swf"
},
Below statement specifies to include only export to excel button in our Data table.
You could also refer to the below link for more information about data tables.
