DataTables

DataTables Examples

by TrueBlueAussie

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.0/css/jquery.dataTables_themeroller.css "></script>
<script src="http://cdn.datatables.net/1.10.5/js/jquery.dataTables.min.js"></script>
<table id="templates" style="display:none">
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.0</td>
        <td>Win 95+</td>
        <td>5</td>
        <td>C</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 5.5</td>
        <td>Win 95+</td>
        <td>5.5</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 6</td>
        <td>Win 98+</td>
        <td>6</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>Internet Explorer 7</td>
        <td>Win XP SP2+</td>
        <td>7</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Trident</td>
        <td>AOL browser (AOL desktop)</td>
        <td>Win XP</td>
        <td>6</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Firefox 1.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.7</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Firefox 1.5</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Firefox 2.0</td>
        <td>Win 98+ / OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Firefox 3.0</td>
        <td>Win 2k+ / OSX.3+</td>
        <td>1.9</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Camino 1.0</td>
        <td>OSX.2+</td>
        <td>1.8</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Camino 1.5</td>
        <td>OSX.3+</td>
        <td>1.8</td>
        <td>A</td>
    </tr>
    <tr>
        <td>Gecko</td>
        <td>Netscape...

JavaScript

console.clear();
$(document).ready(function () {
    $('#example').dataTable({
        "sPaginationType": "full_numbers"
    });

    var dt = $('#example').dataTable().api();
    $('#add').click(function () {
        var $table = $('#example');
        var $tr = $('#templates').find('tr').first();
        //$table.find("tbody").append($tr);
        dt.row.add($tr);
        dt.draw();
    });
});