RETIRED – Last Revised 1/11/2017Fear not, I will post a new version as I’m able.
Introduction
This tutorial covers how to add the datatables jquery table enhancements. Many things can be accomplished with this plugin, but we are going to cover a simple version of it as needed for exporting.
Prerequisites (other than the datatables plugin files):
Access to file management for your server so that you can put the plugin files where they need to be.
HTML/CSS Knowledge
Part 1
Part 2
Part 3
Part 4
Part 5
Part 1
First of all we need to download the datatables core and upload it to your server from http://datatables.net/download/index. In using the download builder we will select the following:
Main Libraries
JQuery – No JQuery (It comes bundled with WordPress by default)
Styling – DataTables
DataTables – DataTables (of course you need this)
Extensions
Buttons – Buttons
Other Button options will appear…
Buttons – HTML5 export
Buttons – JSZip
Buttons – pdfmake
Buttons – Print Preview
Responsive
Packaging Options:
I recommend getting the minified version in a single, local file.
We are using WordPress so in this example I’ve extracted the download contents into the wp-content folder under datatables.
Example: Your-url-here/wp-content/datatables.
I’ve also went ahead and renamed these folders as to shorten and less complicate the titles. (i.e., Buttons-1.1.0 becomes simply buttons)
That’s the hard part! We’re pretty much almost there. Next we have to load the appropriate files for loading styles and scripts required by the plugin.
Part 2
In your view your going to add something like the following into the “Before Content” area of the view. Fix the URL and note the #tablescroll style for keeping the table inside the content of your theme.
<style type="text/css" title="currentStyle">
@import "[siteurl]/wp-content/datatables/css/jquery.dataTables.min.css";
@import "[siteurl]/wp-content/datatables/css/responsive.dataTables.min.css";
@import "[siteurl]/wp-content/datatables/buttons/css/buttons.dataTables.min.css";
.lb {
float: left;
clear: both;
}
</style>
<script type="text/javascript" src="[siteurl]/wp-content/datatables/js/jquery.dataTables.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/js/dataTables.responsive.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/buttons/js/dataTables.buttons.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/buttons/js/buttons.html5.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/buttons/js/buttons.print.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/pdfmake/build/pdfmake.min.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/pdfmake/build/vfs_fonts.js"></script >
<script type="text/javascript" src="[siteurl]/wp-content/datatables/jszip/jszip.min.js"></script >
Part 3
Now we will add the opening HTML table tags along with the table head and foot information followed by an opening table body tag.
In step 5 I’ve added some JQuery that will redefine the table ID of “table” by adding an auto increment variable by ones (e.g. table1, table2, etc.) to allow initialization of multiple datatables on a single page. Additionally note the necessary class attributes added to support responsive tables on mobile devices. Also note that I’ve duplicated the head and foot with an additional table row with a id of “filterrow” that will be used to generate individual column input filtering.
<table cellpadding="0" cellspacing="0" border="0" class="display responsive nowrap" id="table" width="100%">
<thead>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr class="filterrow">
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr class="filterrow">
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
<tbody>
Everything above this line prefixes the “Before Content” with the appropriate plugin files, initializes the plugin script, and prefixes the table to be generated in the view.
Part 4
Next we add the appropriate table rows and table columns that we will use to generate the repeating content in the “Content” area of the view.
<tr> <td>Trident</td> <td>Internet Explorer 4.0</td> <td>Win 95+</td> <td class="center"> 4</td> <td class="center">X</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.0</td> <td>Win 95+</td> <td class="center">5</td> <td class="center">C</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 5.5</td> <td>Win 95+</td> <td class="center">5.5</td> <td class="center">A</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 6</td> <td>Win 98+</td> <td class="center">6</td> <td class="center">A</td> </tr> <tr> <td>Trident</td> <td>Internet Explorer 7</td> <td>Win XP SP2+</td> <td class="center">7</td> <td class="center">A</td> </tr> <tr> <td>Trident</td> <td>AOL browser (AOL desktop)</td> <td>Win XP</td> <td class="center">6</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 1.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.7</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 1.5</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 2.0</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Firefox 3.0</td> <td>Win 2k+ / OSX.3+</td> <td class="center">1.9</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Camino 1.0</td> <td>OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Camino 1.5</td> <td>OSX.3+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Netscape 7.2</td> <td>Win 95+ / Mac OS 8.6-9.2</td> <td class="center">1.7</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Netscape Browser 8</td> <td>Win 98SE+</td> <td class="center">1.7</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Netscape Navigator 9</td> <td>Win 98+ / OSX.2+</td> <td class="center">1.8</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.0</td> <td>Win 95+ / OSX.1+</td> <td class="center">1</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.1</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.1</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.2</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.2</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.3</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.3</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.4</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.4</td> <td class="center">A</td> </tr> <tr> <td>Gecko</td> <td>Mozilla 1.5</td> <td>Win 95+ / OSX.1+</td> <td class="center">1.5</td> <td class="center">A</td> </tr>
Note: The example above is just a “filler” example for this demonstration and is not what would be used to generate repeated content that you might normally use for a view.
Part 5
And finally we close the table in the “After Content” area of the view. Here we actually initialize the datatables plugin. Make note of the comments in the code below as to what each function or line of code does to the table.
</tbody>
</table>
<script>
jQuery(document).ready( function () {
var count = 0;
jQuery("table").each( function () {
var tableID = jQuery(this).attr("id");
count++;
var modTableID = tableID + count;
jQuery(this).attr("ID", modTableID);
var newTableID = jQuery(this).attr("id");
// Setup - add a text input to each header cell
jQuery('#' + newTableID + ' thead tr.filterrow th').each( function () {
var title = jQuery('#' + newTableID + ' thead th').eq( jQuery(this).index() ).text();
jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
} );
// Setup - add a text input to each footer cell
jQuery('#' + newTableID + ' tfoot tr.filterrow th').each( function () {
var title = jQuery('#' + newTableID + ' tfoot th').eq( jQuery(this).index() ).text();
jQuery(this).html( '<input type="text" onclick="stopPropagation(event);" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = jQuery('#' + newTableID).DataTable( {
orderCellsTop: true,
aLengthMenu: [[-1, 10, 25, 50, 100, 200, 300, 400, 500],[ "All", 10, 25, 50, 100, 200, 300, 400, 500]],
iDisplayLength: 25,
dom: 'B<"lb">lrtip',
responsive: 'true',
destroy: 'true',
buttons: [
{ extend: 'copy',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'csv',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'pdfHtml5',
oSelectorOpts: {
filter: 'applied'
}
},
{ extend: 'print',
autoPrint: false,
oSelectorOpts: {
filter: 'applied'
}
}
]
} );
// Apply the filter
jQuery("#" + newTableID + " thead input").on( 'keyup change', function () {
table
.column( jQuery(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
jQuery("#" + newTableID + " tfoot input").on( 'keyup change', function () {
table
.column( jQuery(this).parent().index()+':visible' )
.search( this.value )
.draw();
} );
function stopPropagation(evt) {
if (evt.stopPropagation !== undefined) {
evt.stopPropagation();
} else {
evt.cancelBubble = true;
}
}
} );
} );
document.querySelector('style').textContent += "@media screen and (max-width:1024px) { #filterrow { display: none; } .dt-buttons { display: none; } }";
</script>
The options I’ve added here allow you to do a few things:
aLengthMenu = Display a specified amount of rows in the table via a selectable drop down.
iDisplayLength = The initial amount of rows displayed in the table.
dom = The initializer that will find the appropriate location to start using the jquery.
responsive = Make the table responsive.
buttons = Adds the buttons for exporting data, copying tables, and printing.
destroy = Eliminate the unnecessary duplicate initialization alert.
The other parts of the code are documented and I picked these up at the datatables forums.
This is a demonstration to get an example working for you. You will need to modify the “Content” portion of the table to fit your needs for repeatable table data. You will also have to put in the appropriate columns for the table in the “Before Content” for the table header and table footer. You do not need to be worried about the “Advanced Settings” of the view as the datatables plugin will be handling the sorting, paging and such.
Caveats
Safari doesn’t support the webkit tools as necessary to allow datatables to function fully.
Data imported into excel from CSV may need to be formatted correctly as datatables has no control of this.
The performance of the data tied to this table is limited to the resources available on your server.
The multi-column sorting capability does not work on mobile devices.
Enjoy!
