Creating beautiful and functional tables with DataTables › Style and scripting base
In order to preserve our sanity and provide a common baseline for styling the table, I'm going to include the YUI 3 reset stylesheet. This stylesheet basically strips the built-in default styles from a viewing web-browser to give a common starting point for styling across all browsers. This is particularly useful with tables since browsers can often have different defaults styles for various elements. This reset stylesheet is included using the following HTML:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css">
I've also added some basic styles to my page in order to provide a little bit of a framework for us to work with (font-size, content width etc).
Next we include and execute the Javascript required to enhance the table with DataTables. This is done by including jQuery and DataTables, followed by initialising DataTables. In this particular case I've chosen to use the built-in "full_numbers" pagination style by specifying the sPaginationType parameter. This is all the Javascript that we need to setup our table.
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"sPaginationType": "full_numbers"
} );
} );
</script>
Base table - YUI reset, page styles and DataTables initialisation
Base CSS