Data Table

Description

A data table with client-side sorting, pagination and filter. We use a jQuery plug-in from datatables.net. It requires jQuery and jQuery UI.

<link type="text/css" rel="stylesheet" media="all"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery-ui-1.8.18/jquery-ui-min.css" />
<link type="text/css" rel="stylesheet" media="all"
    href="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.dataTables-1.9.0/jquery.dataTables-min.css" />

<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery-ui-1.8.18/jquery-ui-min.js" />
<script type="text/javascript"
    src="//www.ucsd.edu/common/cwp/active-cherry/lib/jquery.dataTables-1.9.0/jquery.dataTables-min.js" />

<script type="text/javascript">
(function($) {
    $(document).ready(function() {
        $(".datatable").dataTable({
            "bJQueryUI" : true,
            "sPaginationType" : "full_numbers",
            "oLanguage": {"sSearch": "Filter:"}
        });
    });
})(jQuery);
</script>

Here's the html code:

<table class="datatable">
    <thead>
    <tr>
        <th>Country</th>
        <th>Total area</th>
        <th>Land area</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Denmark</td>
        <td>43,070</td>
        <td>42,370</td>
    </tr>
    <tr>
        <td>Finland</td>
        <td>337,030</td>
        <td>305,470</td>
    </tr>
    <tr>
        <td>Iceland</td>
        <td>103,000</td>
        <td>100,250</td>
    </tr>
    <tr>
        <td>Norway</td>
        <td>324,220</td>
        <td>307,860</td>
    </tr>
    <tr>
        <td>Sweden</td>
        <td>449,964</td>
        <td>410,928</td>
    </tr>
    </tbody>
</table>

Sample

You can check out sample at datatables.net or at our sample web application.