Creating beautiful and functional tables with DataTables

DataTables has a wealth of features enabled by default (as can be seen in the zero-configuration example) but the example stylesheets that come in the DataTables package are intentionally rather basic, and there will be times you wish to integrate the look and feel of the table a lot more than the default style allows.

Fortunately styling a DataTables table is actually a relatively simple prospect and I’ll show how to build the style up so that your table looks like the one shown below in this post. In this post I’ll use only very basic initialisation of DataTables and concentrate on just nice CSS styling! I’ll be building on the fine work of Inayaili de Leon for this example, and we will end up with a table which looks like this:

The table
First things first – we need a table to show. You’ll no doubt have your own that you wish to style, but in this example I’m going to use some statistics from the Scottish Government about student numbers. Not the most inspiring of information perhaps, but a perfect example of a statistics table which can be presented on a web-site. The basic unstyled and unscripted table looks like this:

<table id="example" border="0" cellpadding="0" cellspacing="0" class="pretty">

    <thead>
        <tr>
            <th rowspan="2">Local authority</th>
            <th colspan="7">Scottish domiciled students in HE</th>
        </tr>
        <tr>
            <th>2005-06</th>
            <th>2006-07</th>
            <th>2007-08</th>
            <th>2008-09</th>
            <th>2009-10</th>
            <th>% change<br>over last year</th>
            <th>% change<br>since 2005-06</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>212.920</td>
            <td>214.860</td>
            <td>206.390</td>
            <td>207.535</td>
            <td>213.210</td>
            <td>2.7</td>
            <td>0.1</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <th scope="row">Aberdeen City</th>
            <td>9.750</td>
            <td>9.850</td>
            <td>9.945</td>
            <td>9.945</td>
            <td>10.080</td>
            <td>1.4</td>
            <td>3.4</td>
        </tr>
        ...
    </tbody>
</table>

Note that because of the TH elements in the table body rows, this example uses DataTables 1.8, where the ability to consume TH elements in the body is a new feature. The full basic page that we are going to work with is available here.

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>

To position the various control elements we can float them into position using the following CSS. Note I’ve also included highlighting colours to make it easy to see where each element is. In additional this I’ve included a little padding for the various elements, so they visually fit around the table nicely.

div.dataTables_length {
    float: left;
    background-color: red;
}
div.dataTables_filter {
    float: right;
    background-color: green;
}
div.dataTables_info {
    float: left;
    background-color: blue;
}
div.dataTables_paginate {
    float: right;
    background-color: yellow;
}
div.dataTables_length,
div.dataTables_filter,
div.dataTables_paginate,
div.dataTables_info {
    padding: 6px;
}


Also because we are using floating elements we need to consider clearing them. In this case the table needs to clear the paging length and filtering inputs, while any content that follows the table needs to clear the pagination and information elements. For the former we can use a simple clear: both, but for the latter we can use a self-clearing technique.

table.pretty {
    clear: both;
}
/* Self clearing - */
div.dataTables_wrapper:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

html[xmlns] .dataTables_wrapper { display: block; }
* html .dataTables_wrapper { height: 1%; }

http://datatables.net/blog/Creating_beautiful_and_functional_tables_with_DataTables for more detailed demo.