DataTables

DataTables Examples

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/jquery.dataTables.min.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>Platform(s)</th>
            <th>Engine version</th>
            <th><input type="checkbox" class="marcarTodos" /></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 4.0</td>
            <td>Win 95+</td>
            <td> 4</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.0</td>
            <td>Win 95+</td>
            <td>5</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 5.5</td>
            <td>Win 95+</td>
            <td>5.5</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet
                 Explorer 6</td>
            <td>Win 98+</td>
            <td>6</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>Internet Explorer 7</td>
            <td>Win XP SP2+</td>
            <td>7</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
            <td>Trident</td>
            <td>AOL browser (AOL desktop)</td>
            <td>Win XP</td>
            <td>6</td>
            <td><input type="checkbox" class="marcar" /></td>
        </tr>
        <tr>
           ...

JavaScript

$('.marcarTodos').click(toggleMarcarTodos);

function toggleMarcarTodos(event) {
    var $tabela = $("#example");
    var check = $(".marcarTodos", $tabela).is(':checked');
    var $checks = $('.marcar', $tabela);
    
    // Se a sua coluna tiver ordenacao, tem que prevenir de ordenar ao clicar no checkbox! 
    event && event.stopPropagation();
    
    $checks.each(function () {
        $(this).prop("checked", check);
    });
}

$(document).ready(function() {
    $('#example').dataTable({"sPaginationType": "full_numbers"});
    
    // Ao ordernar e paginar, tem que corrigir o estado dos checkboxe's
    $('#example').on('page.dt, order.dt', function () {
        setTimeout(toggleMarcarTodos, 1);
    });
});