jQuery DataTables with hidden rows

jQuery DataTables with hidden rows

by MrTest

HTML

<script src="http://datatables.net/download/build/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css">
<table class="table-data">
    <thead>
        <tr>
            <th>2011</th>
            <th>Internet Explorer</th>
            <th>Firefox</th>
            <th>Chrome</th>
            <th>Safari</th>
            <th>Opera</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>October</td>
            <td>21.7 %</td>
            <td>38.7 %</td>
            <td>32.3 %</td>
            <td>4.2 %</td>
            <td>2.4 %</td>
        </tr>
        
        <tr>
            <td>September</td>
            <td>22.9 %</td>
            <td>39.7 %</td>
            <td>30.5 %</td>
            <td>4.0 %</td>
            <td>2.2 %</td>
        </tr>
        
        <tr class="nested">
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>Cokolwiek</td>
            
            
        </tr>
            
        <tr>
            <td>August</td>
            <td>22.4 %</td>
            <td>40.6 %</td>
            <td>30.3 %</td>
            <td>3.8 %</td>
            <td>2.3 %</td>
        </tr>
        <tr>
            <td>July</td>
            <td>22.0 %</td>
            <td>42.0 %</td>
            <td>29.4 %</td>
            <td>3.6 %</td>
            <td>2.4 %</td>
        </tr>
        <tr>
            <td>June</td>
            <td>23.2 %</td>
            <td>42.2 %</td>
            <td>27.9 %</td>
            <td>3.7 %</td>
            <td>2.4 %</td>
        </tr>
        <tr>
            <td>May</td>
            <td>24.9 %</td>
            <td>42.4 %</td>
            <td>25.9 %</td>
            <td>4.0 %</td>
            <td>2.4 %</td>
        </tr>
        <tr>
            <td>April</td>
            <td>24.3 %</td>
            <td>42.9 %</td>
           ...

CSS

table { width: 100%;}
table tbody tr:nth-child(even){ background: #ddd;}

.nested { display: none;}

JavaScript

$(document).ready(function() {

    $('.table-data').dataTable({
        "bJQueryUI": true,
        "iDisplayLength": 10,
        "aLengthMenu": [[10, 20, 30, -1], [10, 20, 30, "All"]]
    });

    $

});