DataTables

DataTables Examples

by mark47

HTML

<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<script src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.js"></script>
<div class="container">
    <table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
        <thead>
            <tr>
                <th>Rendering engine</th>
                <th>Browser</th>
                <th>Date</th>
                <th>Engine version</th>
                <th>CSS grade</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 4.0</td>
                <td>01/01/2014 12:31</td>
                <td>4</td>
                <td>X</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 5.0</td>
                <td>01/10/2014 12:31</td>
                <td>5</td>
                <td>C</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 5.5</td>
                <td>02/10/2014 12:31</td>
                <td>5.5</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 6</td>
                <td>10/10/2013 12:31</td>
                <td>6</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>Internet Explorer 7</td>
                <td>12/31/2012 12:31</td>
                <td>7</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Trident</td>
                <td>AOL browser (AOL desktop)</td>
                <td>None</td>
                <td>6</td>
                <td>A</td>
            </tr>
            <tr>
                <td>Gecko</td>
                <td>Firefox 1.0</td>
                <td>04/01/2014 12:31</td>
               ...

JavaScript

$(document).ready(function () {
    $('#example').dataTable({
        "aoColumnDefs": [{
            "sType": "date",
            "aTargets": [2]
        }]
    });
});