jQuery DataTables

by Matthew Keefe

HTML

<script src="http://live.datatables.net/release-builds/jquery.datatables.1.8.2.js"></script>
<link rel="stylesheet" href="http://live.datatables.net/media/css/demo_table_jui.css">
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css">
<body id="dt_example">
    <div><p>This is a simple example of <a href="https://datatables.net/">jQuery DataTables</a> using <a href="http://jqueryui.com/">jQuery UI</a>.</p><br/></div>
    <div id="container">
        <table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
            <thead>
                <tr>
                    <th>Rendering engine</th>
                    <th>Browser</th>
                    <th>Platform(s)</th>
                    <th>Engine version</th>
                    <th>CSS grade</th>
                </tr>
            </thead>
            <tbody>
                <tr class="odd gradeX">
                    <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 class="even gradeC">
                    <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 class="odd gradeA">
                    <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 class="even gradeA">
                    <td>Trident</td>
                    <td>Internet Explorer 6</td>
                    <td>Win 98+</td>
                    <td class="center">6</td>
                    <td...

CSS

body {
    padding: 10px;
    font-family: 'Arial';
    font-size: 0.75em;
}

JavaScript

$(document).ready(function () {
    $('#example').dataTable({
        "bJQueryUI": true
    });
});