DataTables + HighLight

DataTables + HighLight

by seefeld

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css">
<table id="table">
    <thead>
        <tr>
            <th>Name</th>
            <th class="uk-date-column" >Date</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Ira N. Ramirez</td>
            <td>10/09/2012</td>
        </tr>
        <tr>
            <td>Ann T. Berg</td>
            <td>20/01/2013</td>
        </tr>
        <tr>
            <td>Hiroko D. Walter</td>
            <td>23/12/2011</td>
        </tr>
        <tr>
            <td>Flavia N. Ware</td>
            <td>08/08/2013</td>
        </tr>
        <tr>
            <td>Erich T. Sawyer</td>
            <td>28/10/2012</td>
        </tr>
        <tr>
            <td>Aiko J. Humphrey</td>
            <td>14/11/2012</td>
        </tr>
        <tr>
            <td>Fuller O. Hendrix</td>
            <td>16/11/2012</td>
        </tr>
        <tr>
            <td>India B. Valenzuela</td>
            <td>01/08/2013</td>
        </tr>
        <tr>
            <td>Blaze F. Decker</td>
            <td>25/09/2013</td>
        </tr>
          <tr>
            <td>Ira N. Ramirez</td>
            <td>10/09/2012</td>
        </tr>
        <tr>
            <td>Ann T. Berg</td>
            <td>20/01/2013</td>
        </tr>
        <tr>
            <td>Hiroko D. Walter</td>
            <td>23/12/2011</td>
        </tr>
        <tr>
            <td>Flavia N. Ware</td>
            <td>08/08/2013</td>
        </tr>
        <tr>
            <td>Erich T. Sawyer</td>
            <td>28/10/2012</td>
        </tr>
        <tr>
            <td>Aiko J. Humphrey</td>
            <td>14/11/2012</td>
        </tr>
        <tr>
            <td>Fuller O. Hendrix</td>
            <td>16/11/2012</td>
        </tr>
        <tr>
            <td>India B. Valenzuela</td>
            <td>01/08/2013</td>
        </tr>
        <tr>
           ...

CSS

body {padding:  20px;}
.filterMatches
{
    background-color: #BFFF00;
}

/*
 * Table wrapper
 */
table {width: 100%;}

.dataTables_wrapper {
    position: relative;
    clear: both;
    *zoom: 1;
}


/*
 * Page length menu
 */
.dataTables_length {
    float: left;
}


/*
 * Filter
 */
.dataTables_filter {
    float: right;
    text-align: right;
}


/*
 * Table information
 */
.dataTables_info {
    clear: both;
    float: left;
}


/*
 * Pagination
 */
.dataTables_paginate {
    float: right;
    text-align: right;
}

JavaScript

// UK Date Sorting 
jQuery.fn.dataTableExt.oSort['uk_date-asc'] = function(a, b) {
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? -1 : ((x > y) ? 1 : 0));
};

jQuery.fn.dataTableExt.oSort['uk_date-desc'] = function(a, b) {
    var ukDatea = $(a).text().split('/');
    var ukDateb = $(b).text().split('/');

    var x = (ukDatea[2] + ukDatea[1] + ukDatea[0]) * 1;
    var y = (ukDateb[2] + ukDateb[1] + ukDateb[0]) * 1;

    return ((x < y) ? 1 : ((x > y) ? -1 : 0));
}

$(document).ready(function() {
    $('#table').dataTable({
        "sPaginationType": "full_numbers",
        "iDisplayLength": 10,
    "aoColumnDefs": [ {
            "aTargets": ["uk-date-column"],
            "sType": "uk_date"}
                   ]
    });

});